Video in email - HTML5 the future?

The possibility of embedded video in marketing emails has been hoped for and talked about for ages. With the web having come on in leaps and bounds over the last few years, and with the general acceptance and availability of online video platforms such as Youtube, things are getting (a bit) better.

There have been a number of attempts at getting embedded video supported in email. GoodMail set up a scheme and forged relationships with email providers to allow emails certified by their system to embed videos, however this seems to have been short lived. Yahoo has discontinued support, and I can't find any information to show that anyone other than AOL work with them now.

Using object or embed tags to add video to emails results in the video being blocked by 99% of viewers, with Apple Mail seemingly the only exception. What is worse is that any fallback code you add is very often stripped out too, leaving nothing at all.

However, there have been some really promising developments with HTML5 video. As it doesn't require anything that could pose a threat to a user's system (email is notorious for being used as a hacking tool), HTML5 video is much safer and therefore not as restricted by email services/software.

According to research carried out by Campaign Monitor, HTML5 video plays in Apple Mail, Entourage 2008, MobileMe and on the iPhone. What is more significant is that the fallback content is displayed everywhere that will not play the video. This is a real step forward, meaning that you can happily embed video, knowing that it will degrade gracefully.

MailChimp currently has a video merge tag that you can use in your emails, which goes to your video page on say Youtube, grabs the keyframe, overlays controls, makes a static jpg wrapped in a link and then drops it into your email. What I am hoping, is that as Vimeo/Youtube/Blip.tv etc roll out HTML5 video, MailChimp will upgrade their video merge tag to make use of real video embedding, knowing that it will degrade properly.

So, after all that, let's see how we do it...

Many HTML5 video players use JavaScript to add controls to their players, but this will not work in email. Video for Everybody has provided some great JavaScript-free examples, so I have based my code on these. The only thing I am going to remove from the VfE examples are the references to the Flash object, which obviously won't work, and would in fact block the fallback image from being displayed.

It should then look like this:

That's all there is to it! The various source tags allow the user agent to go through each one to see if it supports it, finally resting on the linked jpg if all else fails.

A few things to note:

• When editing source code in web-based editors, sometimes they will mess with your code after you go back to rich-editing mode. I found I had to be pretty careful with MailChimp's editor to get this to work.
• I strongly recommend that you make the final fallback image look like it is a video player, i.e. overlay video controls on the jpg, like MailChimp do. This will encourage users to click it, and they will then be taken to the browser-based version. Without this prompt, they may not bother at all.
• I noticed that while the video plays in Apple Mail, if you try to forward it, it strips out the content altogether, including the fallback image. However forwarding from Yahoo Mail, GMail and Hotmail all worked successfully, retaining the fallback image.
• Miro Video Converter is a really handy program for converting your video to the various file formats you need to cover the major browsers.

Please let me know how you get on with this, especially if you find a way to pull in Youtube or Vimeo-hosted videos, which I have so far failed to achieve.