Video in Email Support: June 2013 Update

Video can drive better results: on landing pages, ecommerce stores, … and email messages. Substantial research has been done on this topic. For instance, a recent article from the Content Marketing Institute reported that 76% of those that embedded video in email saw higher click-through rates, and 72% believed that prospects were more likely to buy.

Video in email: things have improved

The issue has historically been one of lack of support: many email clients did not support video, and did not provide a good alternative. Fortunately, things are changing, and – based on our research – our verdict is that video can now be used successfully in an email campaign, when done right.

Let’s get started!

HTML5 video comes to the email rescue

Trying to display a video in an email used to be a bad idea, but many changes have occurred over the last several years.

• New and updated email programs (we also call them “email clients”)
• New and updated browsers
• An updated way to write HTML, called HTML5

Don’t worry, we’re not going to spend time talking about this latest version of HTML. All you need to know about HTML5 is that – when it comes to video content in an email message – it provides a solution!

It allows us to present different versions of our content to different email clients/browsers, and let them pick what they like best.

Historically, the popular Adobe® Flash® player was needed to play video. The problem with Flash – as far as email is concerned – is that unfortunately it was never supported by any email client. And that meant no support for video in email. On the contrary, email clients like HTML5 a lot better. There is growing support for it, with Apple Mail and Outlook.com (formerly Hotmail) that now allow HTML5 video to play right in your inbox.

And there’s more good news: in those email clients where the video doesn’t play, it elegantly “falls back” to an image file that you specify in the HTML code, and you can link that image to a Web page where the video can played in the browser. We’ll go back to this in a few paragraphs.

So, now that you know that HTML5 gives us some sort of a solution to the “video in email doesn’t work” problem, let’s see how it all works.

Preparing the video files

Copying and pasting code from YouTube (or alike) into an HTML email message will not work. Video in email takes a bit more work. The good news is: not that much more work!

We learned that the answer is some sort of HTML5 code. Here’s something interesting about that code: it will serve your video file in different formats so that the client (email program or browser) can pick the one that it can play. For example, the Firefox browser likes play the *.ogv video format.

How do you prepare these different video files? And how long does it take? Fortunately, it’s not a big deal. You can easily convert the video in the different formats by using a conversion tool such as Online Convert. For many of you, the steps may be:

• Find the original video file: it should be in MP4 format (or it can normally be saved as an MP4 file)
• If someone else in your organization uploaded the video to YouTube, log into that YouTube account and download the MP4 version.
• Use the MP4 file as the starting point to generate the *.ogv and *.webm files.
• You now have the three versions of the video that you need for the HTML5 code.
• Create a fallback image (e.g. a JPG file) of the same side of the videos. In our test, we used this image.
• Place the files in an accessible Web location (e.g. a folder on your Web site).

Writing the HTML5 video code

You’re ready to write the code for your email. Actually, you don’t have to write anything at all. You can use a service such as the Video for Everybody Code Generator to generate the code you need.

In the message we used for our tests (see screen shot below), here is the video-related portion of the code:

<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
<video controls="controls" poster="https://dl.dropboxusercontent.com/u/18351710/fallback_image_video_email.jpg" width="500">
<source src="https://dl.dropboxusercontent.com/u/18351710/mailupIntro.mp4" style="width:500;">
<source src="https://dl.dropboxusercontent.com/u/18351710/mailupIntro.webm" type="video/webm" style="width:500;">
<source src="https://dl.dropboxusercontent.com/u/18351710/mailupIntro.ogv" type="video/ogg" style="width:500;">
<a target="_blank" href="http://b7h8c.s47.it/frontend/nl_preview_window.aspx?idNL=17" name="showInBrowser"><img alt="MailUp Preview" src="https://dl.dropboxusercontent.com/u/18351710/fallback_image_video_email.jpg" title="Click to play the video in your browser" width="500"></a>
</video>
<!-- end of video block -->

… where the link around the fallback image links to the HTML version of the message created by MailUp.

That’s right, we linked the fallback image – the image that is shown when the email client cannot immediately play the video – to the Web version of the message. The Web version of the message is by definition displayed in a browser, which typically handles HTML5 video without any issues. The browser will pick the video that it can play from the rest of the HTML5 code, and you’re all set!

Here is a screen shot of the email that we use in our tests. You can download it here. Feel free to use it.

HTML5 Video in Email Checklist

So, summing up:

• Prepare the video files: you need MP4, OGV, and WEBM formats
• Create a good fallback image: it will be displayed whenever the video cannot be played immediately (see the matrix)
• Use a service such as the Video for Everybody Code Generator to generate the HTML5 code.
  
• Insert the code in your email service provider’s HTML editor
• Link the fallback image to the Web version of the email (or another landing page, if you prefer)
• Your’re done!

When you test your message, here’s what you should find…

Video in email support in June of 2013: what we found

In our tests we found two email clients which offer great HTML5 video in email support:

• the Apple mail client offers full video in email support across all devices
• the new Outlook.com service offers full support in Internet Explorer 10, and partial support in other browsers

Other email clients – including Gmail – do not allow you to play video directly within your inbox. The good news is that the code will work in a way where it nicely “falls back” to display what we call the fallback image, as we mentioned earlier.

Having a fallback image allows you to build one email that works well across different email clients, browsers, and mobile devices. Some of your subscribers will have an awesome experience and be able to view your video directly in their inbox, while others will simply have to click the fallback image to see your video. All in all, not a bad compromise!

To run our tests, we created a simple message that embeds video using HTML5 and tested it with the most popular webmail, mobile mail, and desktop mail clients. The message is the one mentioned above.  You can download it here.

We then turned the results into a matrix showing how different email clients behave when displaying the message: view the full and updated Video in Email Support matrix

How many recipients will play video in their inbox?

You now have a pretty good idea of which email clients support video in an email, and how to use HTML5 to optimize the user experience. What you don’t know, however, is how many recipients this translates into.

How many recipients will be able to play the video in their inbox? Should you just include an image and a link to YouTube, Vimeo, or alike, like you’ve always done? Or should you spend time crafting an email that uses HTML5 video code?

Knowing which device and/or operating system they are using to read their emails will help answer this question (see email on mobile statistics for more on this topic). For example, take this sender (these statistics come from MailUp’s “Device Report”).

They have almost 30% of opens on a mobile device, of which almost 80% on iPhone and iPad. That means that around 24% of recipients are on a mobile device that will very likely be able to play the video. In addition, they have around 28% of desktop clients that use an Apple OS, which adds to the total of recipients likely to use an email client able to play the video right in their inbox.

If you knew that 30% of your recipients will be able to play the video right in their email, and most others will nicely fall back to an image that links to the video, what would you do?

We believe that this kind of scenario leads to a “green light” for video in email, when done right!

Please share your thoughts in the comments. Thank you!

P.S. We will keep updating the email client support for video matrix over time.

This article was written by

Massimo Arrigoni

As head of products at MailUp, I spend my days (and nights) thinking of new tools that can help marketers get the job done more effectively. In MailUp 9, for instance, we just introduced a new way for our users to collaborate on email campaigns. With beefree.io, we took our drag-n-drop email editor and turned into a stand-alone, embeddable plugin. The objective is to create tangible value, gather feedback, and push real product innovation based on it.