Large and bold, with bulletproof background images
A HERO section is a great way to draw attention to key information, an image or a product. Each version our templates comes with several pre-designed hero sections:
Note: this HERO is currently only available in Kant 2.1+
The HERO With Video allows you to use HTML5 video in your email campaigns, all while providing a very solid fallback for clients that do not support video in email.
In our tests, the following email clients have played the video:
In supporting email clients, the video will show a play button, as you can see in the screenshot.
When you play the video, most of these clients will automatically start playing the video in fullscreen. Although there is a playsinline attribute that you can add to the <video> tag, iPhone for example ignores it and still goes fullscreen.
The HERO With Video contains a <video> tag, inside which we add a <source> tag for defining the source of the video. The <video> tag also has a poster="" attribute that defines what image is shown before playing the video.
Then, whatever HTML we use after the <source> tag, will be our fallback content that will show up in email clients that do not support HTML5 video. In our products, we use a regular HERO With Background Image as the fallback, so you still get to see rich, editable content that users can interact with (for example, editable text and a "Play" button that can be linked to a YouTube video).
Since all our HERO sections have support for background images in Outlook and Windows Mail, you can use this fallback to show the same poster image, or a different image in email clients that can't play the video. In fact, you could even take it a step further, and use an animated GIF as the fallback background image (maybe a few frames from the beginning of your video?).
Since no email builder can do it for you, you will need to edit the HTML yourself.
Editing in one of the integrated versions:
For Campaign Monitor, you will need to edit the all-in-one HTML file before uploading it, as their editor provides no way of editing the template's HTML code.
If you're going to edit HTML files directly, here's a simple step-by-step guide:Most videos nowadays are widescreen: 1280x720, 1920x1080, etc. - but what we need to know is its height when resized.
If your video were to be proportionally resized to be 700px wide, what would its height be?
Short answer: use this calculator, add your video's dimensions, type 700 in the New Width field and don't fill in the New Height field. What you get in the New Height field is what we're after (we recommend usually rounding it up).
Formula:
posterImageHeight = (videoHeight / videoWidth) x 700
The idea is to get the ratio of your video, and then multiply it by 700, which is the width of our template. With videos in common widescreen resolutions like those mentioned above, you'll usually get 393.75. Our own HERO With Video example rounds that up to 394px - we use 700x394px images for both the poster and the fallback background image.
The <source> tag has a src="" attribute that defines where the video should load from. This must be a URL pointing to the video file that you have hosted somewhere. For example:
<source src="https://s3.envato.com/h264-video-previews/3a8522bd-5af4-4cbe-85a4-2b133676a05f/18148741.mp4" type="video/mp4">
You can use multiple <source> tags one right after the other, to specify different types of media.
MP4 videos will work in most of the supporting email clients, but if you want, you can add a second <source> tag with the video in OGG format, to support Mozilla Thunderbird and Firefox:
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
Note that while the video type/format is OGG, the file extension is .ogv
As you might know, there are many other attributes that you can use on the <video> tag. Our own products include the controls attribute, which shows player controls (don't remove this, as users will have no means of playing the video).
While you're free to experiment with them, we would generally advise against using the autoplay - most supporting email clients ignore it anyway, because it's bad user experience.
Once you're done setting up the video, you can customise the fallback just as you would customise a regular HERO With Background Image.
The 'regular' HERO section has a full width background image, overlayed with centered content.
It has background image support for most email clients (including Outlook and Windows Mail), and includes a background colour fallback for cases when the image might not be loaded. See more in Customisation.
Example
The Split HERO separates text and images into two columns.
It comes in several types:
Example
You can easily change the looks of a Hero by changing its background, text, spacing, and buttons/images.
For sections that support background images, it is recommended that you use a background image that has the dimensions of the dummy image the template provides, or double (for retina).
For retina images, make sure that they are exactly double the size in comparison to those that the template provides. For example, if a HERO uses a 700x500 image, you should use a 1400x1000 one for retina, since it's exactly two times larger.
Important: if you don't stick to the recommended aspect ratio, Outlook will crop your background image and may leave you with important parts of your visual message not showing up. If precision is important, we recommend sticking to the sizes of the placeholder images.
If you add content that increases the height of a section, note that Outlook will not increase the sections's height for you automatically. You will need to do this manually, by changing the CSS height on both the v:image and the v:rect VML tags. Outlook treats this height as fixed, so no matter the amount of content inside, this will be your HERO's height: