Geoff Phillips | 2013-10-14T12:03:27+00:00 |
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.
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.
Recent Comments