Select a page

HTML5 and Video in Email

…from our friends at Campaign Monitor:

HTML5 and video in email

As momentum quickly builds behind HTML5, the new version of HTML and XHTML, we’ve had a close eye on what impact this might have on HTML email in the years to come. While the finer details of HTML5 are still being finalised, Firefox, Safari, Chrome and Opera have offered support for much of the new technology for some time.

One particular area of interest to me was the HTML5 <video> tag. The aim of this tag was to provide native video support using a single codec across all browsers without the need for third party plugins like Flash. While the dream of a universal codec appears unlikely, one clever project has surfaced that uses the <video> tag for browsers that support it and falls back on traditional video options for those that don’t.

Current approaches to video in email

This isn’t the first time we’ve had a close look at support for video in email. In our previous research we were looking for an approach that would allow video in email clients that support it and a clickable fallback image for those that didn’t (that would then play the video in the browser).

The results were disappointing. Only Apple Mail supported decent video playback via Flash, and there was no consistent way to provide fallback content for those clients that don’t support Flash. To me, this is the crux of the problem. If video doesn’t work, you better have a backup plan that works well for everyone else. Because most email clients strip the <object> tag used to insert video, a backup plan wasn’t available.

There had to be a better way, and maybe HTML5 was the answer. Turns out I was half right.

A simple approach using HTML5

Using Kroc Camen’s very cool Video for Everybody as a starting point, I quickly saw that the approach for the browser would be very different than for email clients.

Kroc’s technique provided multiple layers of support (seen here). So, if HTML5 <video> isn’t available, you can fallback to QuickTime or Flash and almost always guarantee the video will work. Because we know that Flash and QuickTime are universally blocked in email, I stripped these backup options to keep it simple.

Due to the codec battle I mentioned earlier, you need to provide your video in both H.264 (supported by Apple and Google) and Ogg Theora (supported by Mozilla and Opera). This isn’t the case with email. The only popular email client that uses Gecko (the Firefox rendering engine) is Thunderbird, which currently chooses not to display HTML5 video. So, just like the Flash/Quicktime fallback, Ogg Theora is also out. If a big number of your recipients were clicking on the web version of your emails then you could consider adding it back in for any subscribers using Firefox.

The final code

After cutting out all the video options made redundant by email, here’s the final code that gave the best results.

<video width="640" height="360" poster="fallback.jpg" controls="controls">
        <source src="" type="video/mp4" />
        <a href=""><img src="fallback.jpg" width="640" height="360" /></a>

As you can see, you provide a fallback image (which is conveniently loaded as the poster for the movie before playing for email clients that support video) in the <video> tag along with the width and height of the video. Within the <video> tag you call the H.264 encoded video using the <source> tag, remembering to fully reference the file on your server.

Finally, add the backup content you’d like to be displayed in any email client that doesn’t support HTML5 inside the <video> tags. This would normally be a clickable screenshot of the video that would play the video in the browser when clicked.

The results

Working on a Mac, my first stop was Apple Mail. The video rendered perfectly. Next stop, my iPhone. Holy crap! Video played beautifully on the iPhone email client too.

I then turned to the popular web-based email clients – Yahoo!, Gmail and Hotmail. Unfortunately, it looks like web-based email clients are choosing to disable HTML5 video from playing. While this was disappointing, the news isn’t all bad. In place of the video I was able to display the provided backup content. In this case, a clickable fallback image where I could link to the video on my web site. This facility was never available with any of the previous attempts at true video in email and was a welcomed improvement.

As I continued to test, the same results were experienced on desktop email clients on the PC. The video didn’t play, but the fallback option appeared in every single client I tested. here are the full results.

Desktop email clients Result
Apple Mail Yes Video plays
Entourage 2008 Yes Video plays
Lotus Notes 6, 7 and 8.5 No Fallback content displayed
Outlook 2007 No Fallback content displayed
Outlook 2003 No Fallback content displayed
Thunderbird No Fallback content displayed
Windows Mail No Fallback content displayed
Web-based email clients Result
AOL Web No Fallback content displayed
Gmail No Fallback content displayed
Hotmail No Fallback content displayed
MobileMe Yes Video plays
MySpace No Fallback content displayed
Mobile email clients Result
iPhone Yes Video plays

See it in action

To give you a feel for how HTML5 video renders in a few of the popular email clients, here are some screenshots from my testing. You can checkout the test page I used here.

Apple Mail 4

When I opened the email in Apple Mail, the fallback image I specified in the poster attribute was displayed while the movie started streaming in. After a few seconds the video controls appeared and I could see the progress of the movie loading and start to watch it.

HTML5 Video in Apple Mail

iPhone 3.1.2

The iPhone doesn’t support video streaming in the browser or email client and instead provides a clear prompt that clicking the poster image will let you watch the movie. Clicking the image then loads the movie in the iPhone’s QuickTime player. At the conclusion of the movie you’re taken back to the email.

HTML5 Video on the iPhone

Outlook 2007

Like all email clients that don’t support HTML5 video, Outlook 2007 displays the fallback content we specify within the video tag. This can be any HTML you like and isn’t limited to a single image. In most cases, this would likely be a screenshot from the movie and perhaps a play icon overlaid to entice the recipient to click the image and view the video in their browser.

Outlook 2007 showing the fallback content

The result was the same for all email clients that didn’t support HTML5 video, making this a handy way to provide a consistent experience for every recipient.

Should you use this technique?

First off, I think this approach is the best option available for including video in email. The fact that you can reliably provide fallback content that works in every email client out there is a huge positive that no other technique I’m aware of offers. The obvious limitation is that right now it only works for your subscribers using Apple related products.

Making a decision on the suitability of this approach really comes down to your subscriber list. For example, 50% of our own customer list open our monthly newsletter using one of the supported Apple email clients (you can find this out for your own list using our handy email client reports). If we wanted to include video in an email, this technique would mean that half our subscribers can watch the video right in their email client, and the other half will see a perfectly acceptable fallback image they can click to watch it in their browser.

Whether you should be sending video in email at all is another question entirely, and perhaps something we’ll tackle in a later post. I didn’t get a chance to test this technique in every email client, and I’d love to see the results in Palm Pre if anyone has one handy (purely because like the iPhone it also uses Webkit to render HTML emails). You can grab a copy of the test email here. I’d also love to hear everyone’s thoughts on this approach and if you think it’s a useful technique.


Leave a reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Marketing 2020
White Paper Download

Please enter you name and email
address below to gain instant access to Marketing 2020!

Contact me to schedule a Marketing 2020 Lunch and Learn