How to: HTML5 Video in Email

How to: HTML5 Video in Email

Fully functional video in email has always been a bit of a holy grail for email marketers. There’s been several close-but-no-cigar moments, including using large animated gifs or using proprietary javascript plugins. These have been good as far as they go, but there’s always been drawbacks in terms of support or functionality.

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.

This campaign for The Times featured video explaining the functionality and benefits of their iPad apps.

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.

The code

<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…

Resources

  • Campaign Monitor have looked at the various options for embedding video into email
  • Style Campaign looks at using Animated GIFs in creative ways to mimic video


  • Anonymous

    Nice! Without having thought it through or done this yet, what if instead of making the still of the video link to a place where the video can be seen (all by itself), you linked to your Web version of the email. Then the recipient would see the video in its intended context, right? I understand that means the reader would have to locate the video still in the Web version of the email and click “play,” but that’s not too much different from what would happen otherwise. I’m going to try this out next time we have a video related to an email.

    Good article!

  • Anonymous

    There are a couple of additional best practices I might suggest.  Since Hotmail requires the user to right click to play the video, it is a good idea to specify an image as the poster indicating that a right click is necessary (since the player controls won’t work when left-clicked).  Also, for animated .GIFs, it is a good idea to include an image to replace the animated .GIF for the mail clients that don’t support either HTML5 or animated .GIF (Outlook 2K7 and 2K10).  Currently, the only way to do this that I’m aware of is to use software like Liveclicker’s Video Email Express, which detects the mail client based on the browser and requesting domain for the video/image assets, then renders the right version of the file on-the-fly.

    Justin

  • Ben Yates

    Great article. Is there way to track plays of individual videos in an e-mail?