How to: HTML5 Video in Email
But thanks to increased support for HTML5 in email clients, combined with the rise in popularity of HTML5 supporting smartphones like the iPhone and Android platforms, fully playable email video is becoming a viable proposition.
There’s plenty of reason to use video – it can be really effective in communicating a complex marketing message, and can really help demonstrate ideas and inspire to your audience. And there’s plenty of real world uses – for example to show off a travel resort, to demonstrate the features of a product, or to provide help tutorials post-purchase.
I’ve used video on several campaigns and found it really effective in driving engagement and click-throughs. On some campaigns we’ve also combined it with a share-with-your-network button to encourage users to share the video on Twitter and Facebook.
Whilst video can be successful, it’s always important to ensure that the video is there for a reason – it needs to be supporting a clear creative message or proposition, and not just there because we can do it.
Where is HTML5 video supported in Email?
The good news is HTML5 video is supported on mobile devices like iPhone, iPad and some Android devices, plus on the desktop Apple Mail and Hotmail. It also plays fully when the hosted version of a campaign is viewed in Firefox, Chrome, Safari or Internet Explorer (9 and above).
And when it’s not supported (Outlook, Gmail, Yahoo! Mail) it’s easy to specify fallback content like an image with a link, so users of those email clients don’t feel like they’re missing out.
<video width="600" height="300" poster="posterimage.jpg" controls="controls"> <source src="http://mywebsite.com/videoname.mp4" type="video/mp4" /> <source src="http://mywebsite.com/videoname.ogg" type="video/ogg" /> <a href="http://mywebsite.com/video"><img src="fallbackimage.jpg" width="600" height="300" /></a> </video>
(code based on Campaign Monitor‘s initial findings)
So what’s going on here?
- The <video> tag has a width and a height, standard stuff. The controls=”controls” attribute is important, and as you can guess adds play controls to the video. The poster=”posterimage.jpg” attribute is the image that is displayed when HTML5 is supported, but the video isn’t playing. It’s subtly different to the fallback image, as we’ll find out.
- There’s two <source> tags – we need an mp4 for most email clients, but we need .ogg for Firefox.
- Inside the <video> tags is our fallback content – for users that can’t view the video in their email. In this case, we have an image with a link. This is a commonly used technique, and this image is often artworked as a still of the video with a play button added – driving the user to a landing page where they can watch the video in a browser as normal.
- As the iPhone and iPad interface adds its own play button, it’s worth making sure that the poster image doesn’t have your own play button – so in that way it’s worth differentiating between that and the fallback image.
(as with all email code, the locations for video files and images should be absolute not relative)
Get stuck in!
Have you seen any video emails out in the wild? or even built some yourself? let us know how you get on in the comments…