3 surprisingly easy steps to embed video in email marketing
“Can we put video in email?” This question has come up a lot over the years, and we still hear it from time to time. After all, video seems like a great way to up the subscriber experience. But can you actually put video in email? And should you? It depends. Which seems like the go-to answer for all things email. Email has so many things to consider that every question raises more questions. So let’s dive into the pros and cons, how to fake it, how to actually embed a real video in your email, and some examples you can take inspiration from.
The pros & cons: Do emails with video work?
The first question I always ask is, “Why do you want to have a video?” Most marketers agree that video is powerful. 91% of consumers prefer interactive and visual content over traditional, text-based, or static media according to our State of Email report. Yet, less than 17% of our State of Email respondents said they used an interactive element in their emails.
Increase engagement
People want to watch videos, which gives video power. And even just the idea of video is powerful:
- Including the word “video” in your subject line can increase open rates up to 19%. (Backlinko)
- Click-through rates increased almost 41% when Wistia included a video thumbnail in their email.
- You can decrease your unsubscribe rates with video by as much as 26%. (Campaign Monitor)
That’s pretty impressive.
But still, why do you want to include a video? Videos can be an effective way to:
- Show how your products or services work
- Put a face or a voice to your brand
- Surprise and delight your audience
What’s the goal of your email? If you just want to increase engagement, video may help you. But you’ve got to make sure the video content you’re sending is content your subscribers are interested in. And does that format make sense for your message?
Wistia’s test spanned several emails, and their 40.83% increase in click-through rate was only for one of their emails. Other tests showed a significantly smaller increase over the non-video email.
Don’t just add a video for adding a video’s sake. Make sure you have good video content that addresses a need your subscribers have. And make sure your audience can even play your video in their emails.
Consider email client support
Unfortunately, support for embedded video is limited. Here’s what email client support currently looks like:
Desktop Clients | Webmail Clients | Mobile Clients |
Outlook 2000-2003 ✘ | Gmail ✘ | iOS Mail ✓ |
Outlook 2007-2019 ✘ | G Suite ✘ | Gmail ✘ |
Outlook for Mac ✓* | Yahoo! Mail ✘ | Gmail IMAP ✘ |
Apple Mail ✓ | AOL ✘ | Samsung Mail ✓ |
Windows 10 Mail ✘ | Outlook.com ✓* | Outlook ✓* |
Office365 ✘ | Office365 ✘ | Yahoo ✘ |
Thunderbird ✓ | Comcast ✘ | AOL ✘ |
Orange.fr ✘ | ||
SFR.fr ✘ |
*supported with limitations
As you can see, that’s a lot of places where video is not supported. The best support for video in email is on iOS, Apple Mail, Samsung Mail, and Thunderbird.
We tested it in Outlook for Mac with varying results:
- In the desktop Outlook 2016 for Mac email client, the video appeared with the controls, but did not play the video unless you right-clicked and chose play. This isn’t intuitive and may cause friction for your subscribers.
- In the desktop Outlook client with Office365 on Mac, the fallback appeared.
We don’t currently have a way to target Outlook for Mac, but you can do one of two things. You can put instructions in the poster image—the image you create for your subscribers to see while the video is loading. Or you can add the attribute autoplay=”autoplay” to have the video start playing automatically. But I don’t recommend that last one because it’s intrusive and can be a jarring experience, especially for those with their volume on high.
Outlook.com recently started supporting video in email. But before you get excited, it’s very limited support as they only support emails from very specific URLs as Rémi Parmentier discovered. And if for some reason, your video is one that’s supported, the experience is very clunky as they don’t support the controls or autoplay. So to have your video play, subscribers would have to right click and then hit play. Which is not ideal.
Take note of video file size and hosting
Another thing to consider is the video itself. File size and where it’s hosted are major factors that’ll determine if the video will even play within your emails.
For your video in email, we recommend no more than a 1MB file size due to extended load times hindering your subscriber’s experience. Larger file sizes take longer to load and require more from your subscribers’ data plans. Keep your subscribers engaged by keeping your file sizes low.
You also need to keep in mind where you’re hosting the video. YouTube or another video hosting platform will not work. You have to host the video yourself and then link directly to the video file. This may cause issues if you’re looking to track video views. But, you can also work with third party video-in-email companies to host and embed a video if you want to track video engagement.
To embed or not to embed?
Limited email client support and video file constraints are just some of the complications of video in email. Because of these restrictions…
We recommend using an embedded video more as a progressive enhancement and only if you have a video with a small enough file size.
Otherwise, use a static thumbnail of the video with a play button over it. Or create a faux video using an animated GIF or animated CSS that looks like it’s playing when subscribers hover over the thumbnail image.
See more pros and cons of video in email before you make the decision to either embed a real video to your email or fake it.
How to embed video in email
So you’ve got your video, you’ve thought about all the limitations of embedding a video in email, and you’ve decided to go for it. Now you just need to know how to do it.
1. Create and upload your video file
Create your video and optimize the file size so it stays under 1MB. Then, upload it and grab the video file’s URL. You’ll need this for the HTML video tag’s src attribute.
2. Create and upload your video’s poster image
A poster image is the image people will be shown as your video is downloading. Best practice is to use a still image from your video and place a play arrow over it so people know it’s a video. You can also use this image to leave instructions for how to play the video.
3. Set up your HTML video tag
The important attributes to include in the HTML video tag are:
- The src attribute: Put in the URL of the video file you’re embedding.
- The poster attribute: This is the image that will be shown as the video is downloading.
- The width and height attributes: Specify how tall and wide your video should be displayed.
- Controls: This tells the email client to show the controls for the video. Not all email clients support this, but it’s nice to include for the ones that do.
The content between the video tags is what will be displayed if the video tag isn’t supported. This can be text or an image, but in either case, we recommend linking to your video so your subscribers can still get the video experience.
Here’s an example of what the HTML video tag looks like:
<video width="600" height="300" controls poster="https://via.placeholder.com/600x300" src="https://example.com/yourvideoname.mp4" >
<!--your fallback goes here-->
<a rel="noopener" target="_blank" href="https://www.example.com" ><img src="https://via.placeholder.com/600x300" width="600" height=”300 /></a>
</video>
And that’s it. For real!
What about client-specific fallbacks?
We used to have to deal with several client-specific fallbacks when iOS stopped supporting video in iOS 8 and 9. But as we’re some years past that (support was reinstated in iOS 10 and the most recent release—iOS 14—still supports video), you’re relatively safe not including it.
If for some reason your subscribers are still using iOS 8 or 9 (on devices up to an iPhone 6 Plus), you can check out Remi Parmentier’s method to target those email clients, hide the video tag, and show a fallback.
You’ll need to add a fallback for Outlook.com, though (which also happens to target Office365 webmail, but as video isn’t supported there, having the fallback won’t change anything). To add a fallback, you add a div around your video tag with a class:
<div class="videoWrapper">
<video width="600" height="300" controls poster="https://via.placeholder.com/600x300" src="https://example.com/yourvideoname.mp4">
<!--your fallback goes here-->
<a rel="noopener" target="_blank" href="https://www.example.com" ><img src="https://via.placeholder.com/600x300" width="600" height="300" /></a>
</video>
</div>
Then, hide that from Outlook.com with:
[class~="x_videoWrapper"]{ display: none !important; }
Afterward, create the fallback with a display: none property and an mso-hide: all to keep it hidden on Outlook desktop clients:
<div class="videoFallback" style="display: none; mso-hide: all;" <a rel="noopener" target="_blank" href="https://www.example.com/"><img border="0" src="https://via.placeholder.com/600x300" width="600" height="300"></a>
</div>
Add in the CSS to display the fallback on Outlook.com:
[class~="x_videoFallback"]{ display: block !important; }
And you’re all set to go. The whole code would look like this:
<div class="videoWrapper">
<video width="600" height="300" controls poster="https://via.placeholder.com/600x300" src="https://example.com/yourvideoname.mp4">
<!--your fallback goes here-->
<a rel="noopener" target="_blank" href="https://www.example.com" ><img src="https://via.placeholder.com/600x300" width="600" height="300" /></a>
</video>
</div>
<!--outlook.com fallback-->
<a class="videoFallback" style="display: none; mso-hide: all;" rel="noopener" target="_blank" href="https://www.example.com/"><img border="0" src="https://via.placeholder.com/600x300" width="600" height="300"></a>
And place these styles in the <head>:
<style>
[class~="x_videoWrapper"]{ display: none !important; }
[class~="x_videoFallback"]{ display: block !important; }
</style>
Everywhere else automatically shows the fallback content in our testing.
 | Ensure a great video-in-email experience Video in email can quickly go from “wow” to “huh?” if they’re not done right. Make sure they work as they should—fallbacks and all—with Litmus Email Previews. Test your emails in 90+ email clients, apps, and devices. And send on-brand, error-free emails. Every time. |
Video in email examples (the good and the bad)
Need some inspiration for using video in email?
Wistia’s meta video in email announcement
Wistia used an embedded video in their email announcing that you could add video in your email. A great way to make a visual impact and actually show the power of video in email. They used a thumbnail fallback for non-supported clients.
Netflix shows off their shows
Netflix is an obvious place to find video in email, but surprisingly they don’t use it very often. So when they do, it stands out. They use the thumbnail that links directly to your Netflix account so you can start watching right away.
Litmus emphasizes a message
We used a faux video in our recent Leading FWD newsletter to draw attention to the video link even more.
How not to do video in email
This email below showed up in my inbox (I blocked out any identifying information or imagery). The subject line said “video” (+1 point)—and then you open it up and the image doesn’t have a play button (-1 point), the images don’t link to anything (-1 point), there’s no call-to-action button to watch the video (-1 point), and the link to the video is not an accessible color (-1 million points).
Basically, it’s not obvious enough that there’s actually a video in here to watch or how to get to it. This email hurt my soul so much, I wrote them and gave them some pointers.
Make your mark
Video in email has been hailed as the next big thing for several years now, but has never quite taken off because of limited support. Although it’s still not supported everywhere, video has come a long way from the piece-meal solution that was needed in the past. Add a video to your next email to get your point across and wow your subscribers—but make sure to include a good fallback.
Blog 