Embedding HTML5 Video

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

Currently, in 2019, there is limited support for HTML5 videos in email clients.

Mail applications like the native iOS client, Apple Mail and the Samsung email client will allow recipients to play the video within the email client itself.

Other clients like Gmail and the Android devices will display a fallback image. For this reason, most companies choose to put the video on a page on their site and link to it from the mail that gets sent out. To fake a video appearing in the email, an images that looks like a still video - an image with a play button - is added and linked to the video page on the website. Click here to read more about how you can add a video to a page.

Client	Plays Video	Shows Fallback
Android 4, Native Client		✔
AOL Mail		✔
Apple Mail *	✔
Gmail Webmail		✔
Gmail Android		✔
Gmail iOS		✔
Lotus Notes		✔
Outlook 2003-2016		✔
Outlook for Mac *	✔
Outlook Android		✔
Outlook iOS		✔
Outlook.com		✔
iOS 10+, Native Client	✔
iOS 9, Native Client		✔
Samsung Galaxy, Native Client		✔
Thunderbird	✔
Yahoo! Mail		✔
Yahoo! Mail Android		✔
Yahoo! Mail iOS		✔
* See below for Apple Mac email clients issues

HTML

The following is the basic video code you can use in the Mailer module. Clients that will display and play the 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.

However, many email clients won’t allow subscribers to play videos. Certain clients, such as iOS 8 and Android 4, will render the video cover but the video remains unplayable, potentially causing confusion for the recipient. It's therefore best to display a separate, default fallback section and only display the video section in clients that can play video. Insert the following snippet to display the video somwhere inside of the <body> tag:

<div class="video-wrapper" style="display:none;">
<p>Video Content</p>
<video width="320" height="176" controls="controls" poster="PATH/COVER-IMAGE.JPG" src="PATH/VIDEO.mp4">

<a href="https://www.YOURWEBSITE.com/VIDEO-PAGE" >
<img height="176" src="PATH/FALLBACK-IMG.jpg" width="320" />
</a>
</video>
</div>

<div class="video-fallback">
<p>Fallback Content</p>
<a href="https://www.YOURWEBSITE.com/VIDEO-PAGE" >
<img height="176" src="PATH/FALLBACK-IMAGE.jpg" width="320" />
</a>
</div>

CSS

To display a video in the mail clients that support embedded videos insert the following CSS somewhere in the <head/> tag

<head>
<style type="text/css">
.video-wrapper {display:none;}
/* Apple Mac Clients: Apple Mail and Outlook for Mac */
@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px) {
.video-wrapper { display:block !important; }
.video-fallback { display:none !important; }
}
/* iOS 10 and above */
@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 */
#MessageViewBody .video-wrapper {
display:block !important; }
#MessageViewBody .video-fallback {
display:none !important;
}
/* thunderbird */
@media screen and (-moz-device-pixel-ratio) {
.video-wrapper {
display:block !important; }
.video-fallback {
display:none !important;
}
}
.moz-text-html .video-wrapper {
display:block !important;
}
.moz-text-html .video-fallback {
display:none !important;
}
</style>
</head>

Please send us suggestions regarding this documentation page
If you would like to recommend improvements to this page, please leave a suggestion for the documentation team.