Skip to Navigation
Videos and interactive content are certainly some of the top trends of the early 20’s. So it’s no wonder then that they’ve quickly come to emails too and more and more electronic messages come with embedded GIFs and other types of videos.
Today we’ll discuss HTML5 videos in emails and how to embed them in two different ways. Two Mailtrap emails – a welcome letter with an embedded video on how Mailtrap works, and a domain setup update email with the background video will be our reference for this matter. We will also talk about viable alternatives to video embedding. Stay tuned!
Why you should add a video to an email
A video won’t work everywhere but there’s plenty of situations when it will. Here are some of them:
- A funny video content can engage a reader and make an email a lot more fun to read.
- A memorable animated background that appears in your emails is almost guaranteed to stick in the reader’s memory.
- An embedded, optimistic video depicting your team makes for a wonderful employer branding material.
- A quick screencast sent in your onboarding email often works better than a long list of instructions for a reader.
- A video preview can promote other types of content you produce, way better than a link in the text.
These are just some examples and there are certainly many more. A video is a nice addition to a newsletter, a product update, an onboarding email, or an order confirmation message. Ultimately, the suitability depends on the communication style of your brand, the audience, the type of emails you send, and others.
HTML5 video in an email: overview
When considering the type of video for your emails, HTML5 often pops up. It’s very common on the web and is gaining traction in emails too. It’s appreciated for its sharpness, compression capabilities, and the relative lightness of videos, as compared to GIFs or other video formats.
The latter is of utmost importance in emails. Heavy emails load slowly, drain mobile plans, and negatively impact the spam scores of emails. It’s also one of the main advantages of embedding HTML5 videos in emails.
Client support for HTML5 video
The key drawback of this format is its client support. HTML5 is not yet fully supported in all email clients. The following chart demonstrates where precisely it works and where a fallback image will load instead.
| Email Client | HTML5 support |
| Apple Mail | Full support |
| iOS 10+ | Full support |
| Outlook for Mac | Full support |
| Thunderbird | Full support |
| Samsung Mail (mobile) | Full support |
| Gmail (Web/mobile) | Fallback only |
| iOS 9 and earlier | Fallback only |
| Outlook.com + mobile | Fallback only |
| Hotmail | Fallback only |
| Yahoo (web/mobile) | Fallback only |
| AOL | Fallback only |
Overall, it’s not as bad as it seems. The supported browsers account for about 50-60% of devices capable of receiving emails. All the others can be served a static image or even an animated GIF.
MSO-Hide: how to hide or display video content in emails for Outlook
Before we proceed any further there is an important thing to remember: Windows Outlook 2003 and above use Microsoft Word as a rendering engine, which can lead to some weird rendering issues. To avoid this, we can add MSO (Microsoft Office) tags to HTML / CSS anywhere in an email template. This code will be ignored by other email clients and read by the Word-based versions of Outlook only.
This MSO – Style Reference Sheet link comprises 372 Microsoft specific styles which includes common ones used in email. If you need to understand how mso-hide values are used in detail, all you have to do is type “mso” into the filter bar, and it should give you the list of Microsoft specific CSS attributes with mso- prefix.
In our case, we will further use the ‘mso-hide:all’ tag to hide some of the video content and use fallbacks or redirects instead. Follow Mailtrap engineers’ code lines and find a special section showing how to embed HTML5 video in emails in the <!--outlook part-->
The mso-hide issue having been addressed, let’s get back to embedding HTML5 video in email step by step.
Add an HTML5 video to email
Check out this Mailtrap welcome email to see how embedded HTML5 video works:
Embedding HTML5 videos requires a bit of knowledge of this framework but it’s not rocket science by any means.
So, let’s go step by step and see how to code it.
First, record a video and save it in a .mp4 format, you can use FlexClip, for example. Try to keep things short as it will also lead to a quick load for a user. As a reminder, we’re using a GIF here as a fallback so a reader can see our animation regardless of the device they open an email on (with a small exception, more below).
GIFs tend to get heavy, especially if they last for more than a few seconds. For that reason, rather than save the same video in both .mp4 and .gif formats, try to remove the majority of frames when creating the latter. It’s okay if the transitions are not smooth. It’s a GIF.
<video
src="https://mailtrap.io/wp-content/uploads/2022/05/Mailtrap-html5-video.mp4" poster="https://media1.giphy.com/media/XbBJTYS9hDeUFpTxwU/giphy.gif?cid=790b76111d76dc877cd0cb1d30b7638db65fe331b3d202ce&rid=giphy.gif&ct=g"
width="100%" height="100%" max-width="539" max-height="303" controls
style="mso-hide: all; display:block; width: 100%; height: auto; max-height: none; object-fit: cover;">
</video>A static image can naturally be used as a fallback too, especially if you have plenty of readers using Outlook versions 2007-2013. GIFs are not supported in these clients so a quality SVG is probably a better idea. The image can be clickable, leading a reader to a video hosted elsewhere. Not a perfect user experience but a lot better than a black screen.
<video
src="https://mailtrap.io/wp-content/uploads/2022/05/Mailtrap-html5-video.mp4" poster="https://embed-fastly.wistia.com/deliveries/a115405df23886f18401cede7f6f2a45"
width="100%" height="100%" max-width="539" max-height="303" controls
style="mso-hide: all; display:block; width: 100%; height: auto; max-height: none; object-fit: cover;">
</video>To add an HTML5 video to your email, you can use the following code:
<video autoplay="autoplay" loop="loop" clipID="mailtrap1" poster="https://media1.giphy.com/media/XbBJTYS9hDeUFpTxwU/giphy.gif?cid=790b76111d76dc877cd0cb1d30b7638db65fe331b3d202ce&rid=giphy.gif&ct=g"
controls="controls"
src="https://mailtrap.io/wp-content/uploads/2022/05/Mailtrap-html5-video.mp4"
style="mso-hide: all;display:block;width: 100%;height: auto;max-height: none;">
</video>Keep in mind that autoplay preview in a browser would be different from an autoplay preview in email clients.
Although HTML5 videos are supported in Outlook, they don’t always work as expected (it’s just one of the many common Outlook rendering issues ). Typically, a video may load but not autoplay, forcing a user to click/tap on it first. What’s more, the client will just display the first frame, without any controls indicating that a user should tap/click to play the video.
To address that, consider uploading an alternative video and adding some sort of “watch the video’ header or symbol.
<video
src="https://mailtrap.io/wp-content/uploads/2022/05/Mailtrap-html5-video.mp4" poster="https://embed-fastly.wistia.com/deliveries/a115405df23886f18401cede7f6f2a45"
width="100%" height="100%" max-width="539" max-height="303" controls
style="mso-hide: all; display:block; width: 100%; height: auto; max-height: none; object-fit: cover;">
</video>
<!--outlook part-->
<a href="https://www.youtube.com/watch?v=5tKtVuT-MGE" target="_blank"
alt="Redirect" style="mso-hide: all;display:block;width: inherit;height: inherit; max-height: inherit;"><img src="https://media1.giphy.com/media/XbBJTYS9hDeUFpTxwU/giphy.gif?cid=790b76111d76dc877cd0cb1d30b7638db65fe331b3d202ce&rid=giphy.gif&ct=g" border="0" alt=" "
style="mso-hide: all;display:block;width: inherit;height: inherit;
max-height: inherit;"/> </a>Now let’s take care of the fallback for other non-supported email clients, Gmail included. They won’t play the HTML5 video but can render instead a static image or a GIF.
Add the following code on top of the file:
<div style="display:block; width: 539px; height: 303px;">
<a href="https://www.youtube.com/watch?v=5tKtVuT-MGE" target="_blank" style="mso-hide: all;display:block;width: inherit;height: inherit; max-height: inherit;"><img src="https://embed-fastly.wistia.com/deliveries/a115405df23886f18401cede7f6f2a45"
border="0" alt=" "
style="mso-hide: all;display:block;width: inherit;height: inherit;
max-height: inherit;"/> </a>
</div>With all these fallback settings, it’s not hard to forget about making sure the video is displayed on supported devices. At the same time, we don’t want the fallback image to appear, for obvious reasons.
@media (min-device-width:600px) {
.video_mailtrap1 {
width: inherit!important;
height: inherit!important;
max-height: inherit!important
}This should do for the video/GIF/image setup.
As a final step, we need to give the email template some structure. So let’s wrap the media queries with the following:
Above:
.structure__mailtrap1 {
width: 600px;
height: 338px;
max-width: 600px;
max-height: 338px;
}Below:
@media only screen and (max-width:480px) {
.dimensions_em_4566 {
width: 100%;
height: auto;
max-width:100%;
}
}
@media only screen and (min-width:481px) and (max-width:599px) {
.dimensions_em_4566 {
width: 100%;
height: auto;
max-width:100%;
}
}All in all, the code for adding HTML5 video to email will look as follows:
.structure__mailtrap1 {
width: 600px;
height: 338px;
max-width: 600px;
max-height: 338px;
}
(min-device-width:600px) {
.video_mailtrap1 {
width: inherit!important;
height: inherit!important;
max-height: inherit!important
}
.image_mailtrap1 {
width:0!important;
height:0 !important;
padding:0!important;
overflow:hidden;
}
}
@media only screen and (max-width:480px) {
.dimensions_em_4566 {
width: 100%;
height: auto;
max-width:100%;
}
}
@media only screen and (min-width:481px) and (max-width:599px) {
.dimensions_em_4566 {
width: 100%;
height: auto;
max-width:100%;
}
}
<div class="structure.mailtrap1" style="overflow: hidden">
<div class="img_mailtrap1" style="width: inherit;text-align: center;">
<a href="https://www.youtube.com/watch?v=5tKtVuT-MGE"
target="_blank" style="display:block;width: inherit;height: inherit;
max-height: inherit;"><img src="https://embed-fastly.wistia.com/deliveries/a115405df23886f18401cede7f6f2a45" alt="" style="display:block;
width: inherit;height: inherit;max-height: inherit;border:0"> </a>
</div>
<video autoplay="autoplay" loop="loop" clipID="mailtrap1" poster="https://media1.giphy.com/media/XbBJTYS9hDeUFpTxwU/giphy.gif?cid=790b76111d76dc877cd0cb1d30b7638db65fe331b3d202ce&rid=giphy.gif&ct=g"
controls="controls" src="https://mailtrap.io/wp-content/uploads/2022/05/Mailtrap-html5-video.mp4"
style="mso-hide: all;display:block;width: 100%;height: auto;max-height: none;">
</video>
<!--outlook part-->
<a href="https://www.youtube.com/watch?v=5tKtVuT-MGE" target="_blank"
alt="Redirect" style="mso-hide: all;display:block;width: inherit;height: inherit;
max-height: inherit;">
<img src="https://media1.giphy.com/media/XbBJTYS9hDeUFpTxwU/giphy.gif?cid=790b76111d76dc877cd0cb1d30b7638db65fe331b3d202ce&rid=giphy.gif&ct=g" border="0" alt=""
style="mso-hide: all;display:block;width: inherit;height: inherit;
max-height: inherit;"/> </a>
</video>
</div>
</div>HTML5 background video in email
Most commonly a video is simply embedded into an email template, in-between paragraphs, on top of a message, or anywhere else. But to create an even more interesting impression, using an HTML5 video as an email background is also an option. This requires a slightly different approach than what we covered above.
Check out our Domain Setup Update email with an HTML5 video at the background:
Same as a regular video, an animated background also requires a fallback for unsupported clients. It’s even more important in this case.
If you forget to set a fallback for a regular video, readers will probably see just the first frame, which may still do the job. Worst case scenario, they’ll treat it as a regular image and move on. If the same happens to a video background, it may (and likely will) make the entire email unreadable.
Let’s get to business now.
First things first, we build a table, and right away add a cell with a fallback image. On top of that, we specify the background color that will be kind of the second level of fallback. It’s important because if an email client doesn’t support HTML5, our background will fallback into a custom image.
<body style="font-family: 'Inter', sans-serif; background: #F6FAFB;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#F6FAFB">
<tbody>
<tr>
<td valign="top" align="center">
<table class="container" width="600" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
Next, we need to create a wrapper, let’s call it ‘video-wrap’, and insert a video into it. Same as above, it’s best to use the .mp4 format.
<div class="video-wrap">
<video autoplay="autoplay"loop="loop" class="video" style="display: none;">
<source src="https://mailtrap-background-video.netlify.app/video.mp4"
type="video/mp4">
</video>
</divAt this point, only Webkit-based email clients support HTML5 so we can address them directly with a media query:
@media screen and (-webkit-min-device-pixel-ratio: 0) {
div[class="video-wrap"]{
height: 303px;
position: relative;
overflow: hidden;
padding:0;
margin:0;}
}Notice that initially, we hid the ‘video’ class because we didn’t want it to be displayed in all email clients. We then overwrote it with the media query specific for Webkit clients.
Following the same rule, we specify the CSS rules for the video:
@media screen and (-webkit-min-device-pixel-ratio: 0) {
video[class="video"]{
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
display:inline-block !important;}
}So at this point, we have the wrapper and a background video specified. Both render only on Webkit-based email clients, rendering a fallback image for all others.
It would be a good idea to insert something on top of the video background. Here’s a sample overlay:
<div class="overlay">
@media screen and (-webkit-min-device-pixel-ratio: 0) {
div[class="overlay"]{
height: 100%;
min-height: 100%;
position: relative;
margin: 0 auto;
padding: 0 20px;
z-index:3;}
}
</div>What then should follow is a standard table with the button content meant to be displayed over the background video. For example:
<div class="video-overlay">
<a class="button" href="/" title="Get my plan" style="background: #4165A9; text-decoration: none; position: absolute; bottom: 34px; left: calc(50% - 110px); display: inline-block; padding: 10px 32px; color: #fff; font-size: 14px; line-height: 21px; text-align: center; letter-spacing: 0.01em; font-weight: bold; border-radius: 4px;">Domain Setup Updates</a>
</div>All in all, the entire code looks as follows:
<style type="text/css">
.video-wrap {
position: relative;
padding: 0;
border-radius: 8px;
overflow: hidden;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.video-wrap {
height: 303px;
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
}
.video {
min-width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
object-fit: cover;
display:inline-block !important;
}
.video-overlay {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(0deg, rgba(41, 66, 111, 0.19), rgba(41, 66, 111, 0.19));
z-index: 2;
}
}
</style>
<tr><td class="video-wrap" align=”center” style=”background: url(https://embed-fastly.wistia.com/deliveries/a115405df23886f18401cede7f6f2a45') top center no-repeat;background-size: cover;)” width=”100%”><video class="video" width="100%" height="100%" autoplay muted loop src="https://mailtrap-background-video.netlify.app/video.mp4" poster="https://embed-fastly.wistia.com/deliveries/a115405df23886f18401cede7f6f2a45"></video>
<div class="video-overlay">
<a class="button" href="/" title="Check more details" style="background: #4165A9; text-decoration: none; position: absolute; bottom: 34px; left: calc(50% - 110px); display: inline-block; padding: 10px 32px; color: #fff; font-size: 14px; line-height: 21px; text-align: center; letter-spacing: 0.01em; font-weight: bold; border-radius: 4px;">Domain Setup Updates</a></div></td></tr>Alternatives to embedding videos in emails
Due to the relatively low support, HTML5 won’t work for everyone. Particularly if you have a lot of readers on Gmail (both web and mobile), so you may want to consider other methods for animating your emails.
GIF is a common substitute that’s widely supported and easy to create. It doesn’t come anywhere close to HTML5 in terms of quality but if it’s not the top priority for you, it’s worth giving it a try. We’ve covered the topic in more detail in our post on GIF in email.
Simple animations within emails are also possible with some CSS. The support for certain elements varies but if you’re after some simple background effects, this may just do the job.
Lastly, animated PNGs (APNGs) are also an option, though not necessarily the best choice for Gmail audiences. Regardless, APNGs are easy to craft, lightweight, and suitable for GIF-style animations.
Testing your HTML5 video in emails with Mailtrap
Keep in mind that it’s a MUST to test your emails before sending them to your customers. Unless you want your clients to “enjoy” scattered pieces of code, images, and what not in their emails from you.
Would you like to see immediately which email clients need a fallback because they won’t render your HTML5 video tags at staging?
No problem. It’s a no brainer with Mailtrap.
The Mailtrap tool has an email sandbox solution for secure email testing. It allows you to capture SMTP traffic from staging and dev environments. You can analyze content for spam score, validate HTML and CSS issues and many more without accidentally spamming your customers. It only takes 5 minutes to set-up before your first email is tested.
Check out how we tested our welcome email with the embedded HTML5 video with the Mailtrap tool.
Mailtrap HTML Check dashboard shows us that our HTML <video> element wouldn’t work, for example, in any of Gmail clients: Gmail Android, Gmail Desktop Mail, Gmail iOS, and Gmail Mobile Webmail.
So yes, better to always test than regret it later.
Thanks for reading!
