A How-To Guide to Embedding HTML5 Video in Email

Geoff Phillips | 2013-10-14T12:03:27+00:00 |

Oct. 30, 2013 Update:
We’ve updated this article to include a fix for Outlook.com. Thanks to Justin Foster for bringing that to our attention!

Have you been dying to add video to your emails, but worried about the technical barriers? It might not be as hard as you thought. Just take our handy code snippet and insert your own video.

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Video in Email Test</title>

<style type="text/css">
     
  @media screen and (max-width:800px) {
    div[class=video_holder] {display:none;}
    div[class=android] {display:block !important;width:320px !important;height:176px !important;}
  }

  @media screen and (width:320px), screen and (width:703px){
    div[class=android] {display:none !important;}  
    div[class=video_holder] {display:block !important;}
  }

  .ExternalClass div.video_holder {display:none !important;}
  .ExternalClass div.android {display:block !important;width:100% !important;height:200px !important;}

</style>
</head>
<body>
<div class="video_holder">
  <p>Video Div</p>
    <video width="320" height="176" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
          <a href="www.emailonacid.com" ><img height="176" 
            src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/backup_bunny2.jpg" width="320" /></a>
    </video>
</div>
<div class="android" style="display:none; width:0px; height:0px; overflow:hidden;">
  <p>Android Div</p>
  <a href="www.emailonacid.com" ><img height="176" 
    src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/backup_bunny2.jpg" width="320" /></a>
</div>
</body>
</html>

Email Client Support

As you can see from the table below, support for HTML5 video is still limited but the clients that do support it represent over 62% of the market share. Email applications, like the native iOS client, Apple Mail and Outlook.com will allow recipents to play your video within the email client itself. Other clients like Gmail and the Android devices will display a fallback image.

Client	Plays Video	Shows Fallback
Apple Mail 4
Apple Mail 5
Apple Mail 6
Live Mail
Lotus Notes 6.5
Lotus Notes 7
Lotus Notes 8
Lotus Notes 8.5
Outlook 2003
Outlook 2007
Outlook 2010
Outlook 2013
Outlook Express
Thunderbird 13
Thunderbird 24
Windows Mail
Android 2.3, Native Client
Android 4, Native Client
Android Gmail 2.2
BlackBerry 8800
BlackBerry 9930
iPad 5.0, Native Client
iPad Gmail
iPhone 4S (iOS 5), Native Client
iPhone 4S (iOS 6), Native Client
iPhone 5 (iOS 6.1), Native Client
Kindle Fire 2.3
AOL – Chrome 26 (Mac)
AOL – Chrome 26 (Win)
AOL – Firefox 21 (Mac)
AOL – Firefox 21 (Win)
AOL – Internet Explorer 8 (Win)
AOL – Internet Explorer 9 (Win)
Gmail – Chrome 26 (Mac)
Gmail – Chrome 26 (Win)
Gmail – Firefox 21 (Mac)
Gmail – Firefox 21 (Win)
Gmail – Internet Explorer 8 (Win)
Gmail – Internet Explorer 9 (Win)
Gmail – Safari 5 (Win)
Outlook.com – Chrome 26 (Mac)
Outlook.com – Chrome 26 (Win)
Outlook.com – Firefox 21 (Mac)
Outlook.com – Firefox 21 (Win)
Outlook.com – Internet Explorer 8 (Win)
Outlook.com – Internet Explorer 9 (Win)
Outlook.com – Safari 5 (Win)
Yahoo! – Chrome 26 (Mac)
Yahoo! – Chrome 26 (Win)
Yahoo! – Firefox 21 (Mac)
Yahoo! – Firefox 21 (Win)
Yahoo! – Internet Explorer 8 (Win)
Yahoo! – Internet Explorer 9 (Win)

Android Work-Around

The biggest technical hurdle we faced was getting the fallback image to work properly on Android devices. In the native email client, the video player displays but it doesn’t load up the video, instead it shows a white or grey screen depending on the device. This is much worse than showing the fallback image, because users have no way to view the video.

To get around this, we started with a “max-width: 800px” media query to capture most mobile devices. This media query will hide the “video_holder” div and show the “android” div with just the linked fallback image. Then we overwrote the first media query with another one for the iPhone and iPad, which will play your video in the client itself.

<style type="text/css">

  @media screen and (max-width:800px) {
    div[class=video_holder] {display:none;}
    div[class=android] {display:block !important;width:320px !important;height:176px !important;}
  }

  @media screen and (width:320px), screen and (width:703px){
    div[class=android] {display:none !important;}  
    div[class=video_holder] {display:block !important;}
  }

</style>
</head>
<body>
<div class="video_holder">
    <video width="320" height="176" controls>
      ...video code here...
    </video>
</div>
<div class="android" style="display:none; width:0px; height:0px; overflow:hidden;">
    ...fallback image here...
</div>
</body>

Because of Gmail, we can’t just use “display: none;” to hide the “android” div. That’s why we added “width:0; overflow: hidden;” to the inline styles on that div.

MIME Types and Server Configuration

Your video must be served with the correct MIME type, or it won’t play in Firefox. Since Mozilla is the primary rendering engine for Thunderbird and varioius web based email clients, designers who wish to stick with the traditional linked image fallback technique should take note. On Apache, you’ll need to create .htaccess files (or set these in the Directory block, if you have access) for each file type association. To add them, use the AddType directive.

	AddType video/mp4 .mp4 .m4v
	AddType video/ogg .ogv .ogg
	AddType video/webm .webm

Check out this Stack Overflow article for more on that.

Outlook.com Work-Around

In Outlook.com, the HTML5 video renders with inoperable controls. We used Outlook.com’s unique “.ExternalClass” to make sure that our fallback div is displayed instead. Thanks to Justin Foster for pointing this one out!

  .ExternalClass div.video_holder {display:none !important;}
  .ExternalClass div.android {display:block !important;width:100% !important;height:200px !important;}

Nokia Windows Phones

We’ve been told that Nokia Windows Phones don’t render divs properly, so you may want to consider using a different element, like a table, instead.

Table Spacing in Outlook 2007+

If you’re putting the video into a “seamless” table structure (as in your video needs to stack perfectly with other images) you’ll need to take some extra steps to make sure that the hidden video doesn’t create a gap in Outlook 2007-2013. Hiding the div should only create a small space of about 5px, so for most layouts this won’t have a significant effect. If you need pixel perfection, check out our blog on removing unwanted spaces from Outlook 2007-2013.

Customizing the Code

To customize this code, you’ll want to generate your own fallback image. It should be the same size as the video you’re using. Replace the URLs for the video sources and image, and make sure you’ve set each of these to the correct dimensions. If you don’t set the right dimensions, iOS6 will give you some big black bars on top and bottom of your video. We added the paragraphs “Video Div” and “Android Div” for testing purposes, so that you can see which div is visible. You’ll probably want to remove them from your code.

The Classic Solution

It wouldn’t do to discuss embedding video in email without mentioning the current preferred method: not embedding video. That’s right, many designers prefer to embed a picture with a play button or an animated .gif file instead of embedding a video. This has a few advantages: it is simple to code, it allows click-throughs and views to be tracked more easily, and it works pretty much everywhere. If you’re worried about the complexity of adding HTML5 video to your campaign, consider just using a linked image instead.