Feb, 22, 2017 Update:
This article has been updated to address the changes in email clients since it was written in 2013.

This article will teach you how to embed HTML5 video so that it can be played in email clients that support video in email, specifically Apple Mail, iOS 10 and the Samsung email client. It will also cover various fallback techniques so that alternate content is displayed in the clients that cannot play video.

Click here to see the full code

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 half of the market share. Email applications, like the native iOS client, Apple Mail and the Samsung email client will allow recipients 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  
Lotus Notes  
Outlook 2003-2016  
iOS 10, Native Client  
iOS 9, Native Client  
iOS Gmail  
iOS Yahoo! Mail  
iOS Outlook  
Samsung Galaxy, Native Client  
Android 4, Native Client  
Android Gmail  
Android Yahoo! Mail  
AOL Mail  
Yahoo! Mail  

Basic Video Code

The following is the basic video code. Clients that will be able to display and play video will use the poster attribute as the cover image for the video and the file referenced by the source tag as the video. Clients that don’t support video will render the image within the video tag that is wrapped by a link.

<video width="320" height="176" controls poster="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" src="http://www.w3schools.com/html/mov_bbb.mp4" >
      <!-- fallback 1 -->
      <a href="http://www.emailonacid.com" ><img height="176" 
        src="http://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_backup.jpg" width="320" /></a>

Email Specific Fallbacks

However, as is the case with email, many email clients don’t play ball. Certain clients such as iOS 8 and Android 4 will render the video cover but the video remains unplayable, potentially causing confusion to the recipient. Thus, the safe bet is to display a separate fallback section by default and then only display the video section in clients that are able to play video like the code below.

<!-- video section initially hidden -->

Video Content: MP4

<!-- fallback section initially displayed -->

Fallback Content

Since Yahoo! Mail strips display:none inline, you also need to add this to the <head>:

 .video-wrapper {display:none;}

Displaying Video in Clients That Support Video

Apple Mail

For Apple Mail, we can use the -webkit-min-device-pixel-ratio media query to enable video. However we also need to prevent the video from displaying in iOS 8 clients that match that media query but does not play video. The fix is to add a min-device-width query that is wider than the iPad’s email client device width. Interestingly, this media query will activate on AOL Mail (that does not support video) for webkit browsers such as Chrome and Safari, but luckily, AOL Mail will simply display the fallback image and link that is embedded within the video tag.

@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px) 
  .video-wrapper { display:block!important; }
  .video-fallback { display:none!important; }

iOS 10

Video was supported in the iOS 7 email client but was removed in iOS 8 and 9. Apple then added video support back in iOS 10. Unfortunately, in iOS 8 and 9, the email client would still render the video with a play button but not play the video! We need a way to only show the video content in iOS 10. Our friend Remi Parmentier discovered a clever method to only display video in IOS 10 using the @supports declaration. It targets certain CSS that iOS 10 supports but not iOS 9. Read here for his explanation.

However, Yahoo! Mail does not like the @supports declaration and will expose any CSS within the block in the Webmail. (Yahoo! Mail used to break media queries as well but that has been fixed – see this article for background). To ensure the CSS within the @support block are not activated in Yahoo! Mail, I use the “starts with” (^=) attribute selector that Yahoo! Mail strips (it allows regular attribute selectors).

@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
  div[class^=video-wrapper] { display:block!important; }
  div[class^=video-fallback] { display:none!important; }

Samsung Email Client

Although not frequently discussed, the Samsung email client that comes pre-installed in the Galaxy line of phones supports video. If you want to display video within the client you can use the following CSS:

#MessageViewBody .video-wrapper { display:block!important; }
#MessageViewBody .video-fallback { display:none!important; }

Full Code

<!doctype html>
<title>Video in Email Test</title>
<style type="text/css">
 .video-wrapper {display:none;}
 @media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px) 
  .video-wrapper { display:block!important; }
  .video-fallback { display:none!important; }
  @supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
    div[class^=video-wrapper] { display:block!important; }
    div[class^=video-fallback] { display:none!important; }
  #MessageViewBody .video-wrapper { display:block!important; }
  #MessageViewBody .video-fallback { display:none!important; }
<B>Video in Email Test</B><BR>

<!-- video section -->

Video Content

<!-- fallback section -->

Fallback Content

</body> </html>

Video Formats

HTML5 supports three main video formats: MP4, OGG and WebM. Due to intellectual property issues, Apple decided to only support MP4 in their browsers and email clients, hence that’s the only format I’d recommend using for video in email.

You should also ensure that your server is configured to output the correct MIME type so that the email client is able to detect the proper video format when retrieving the video. Check out this article for more details. If you are using the Apache Web server, ensure that this entry is in your .htaccess file.

AddType video/mp4 .mp4 .m4v

Should You Use Video in Email?

Although embedding video in email is not difficult, it is not exactly trivial either. Some email marketers advocate for just displaying a fake play button on an image and having that open the browser to a landing page that hosts the video. Others prefer displaying an animated gif converted from a video since animated gifs are supported in all email clients except for Microsoft Outlook.

Personally I think it depends on your audience and your brand. Having a video play right in the email client can add a wow factor to your newsletters and if you use video a lot, the experience of having the video play without taking the user outside to a browser may make your recipients more likely to play the video. Either way, its your call!

If you’ve decided to use video in your email, make sure that you verify that your email will render nicely across the most popular email clients. Email on Acid can help you test your email across these clients in seconds.


Big Thanks to Big Buck Bunny!

This video was used for testing coutesy of Big Buck Bunny.

What are you going to do with HTML5 video in your next email? Let us know in the comments below.

Original Source