Many email marketers are interested in including video in their emails—only to learn that most email clients don’t offer support for videos.
Enter: faux video.
What is faux video?
Faux video imitates video-like movement with an interaction that lets your subscribers feel like they’re playing the video in their inbox. There are a number of faux video techniques out there to simulate an embed video in email.
In this post, we’ll walk you through the technique we use here at Litmus. It’s built on animated GIFs and has one big advantage: It also works in Gmail!
Why use faux video?
Though video in email is a popular topic, it only works in Apple Mail and iOS Mail—the only email clients that provide full support for HTML5 video. By using a faux video technique, you can imitate real videos in your email with support across many more email clients.
The faux video technique is supported by:
- Gmail
- Gmail App
- Apple Mail
- iOS Mails for iPhone and iPad
- Samsung Mail
- Outlook for Mac
So if you’re looking to add some video-like movement to your campaigns, utilizing the faux video technique means your video content can be seen by more subscribers than you could reach when utilizing HTML5 video.
How to create a faux video using layered images
To use this faux video technique in your next email campaign, you will need two images that are the same size: a static cover and an animated GIF, layered on top of each other.
Using a static cover image for faux video
In this example, our static cover image is named cover-play.jpg. This is the image that will display by default, but will disappear and reveal the background GIF underneath when your subscriber interacts with your email. Our example has a play button icon in the static cover image to imitate a video, but you don’t necessarily need to include one—you can incorporate any kind of graphic or text, if you’d like, but don’t forget your ALT text!
Using an animated GIF background image
Then, you’ll need the animated GIF background image—ours is named fauxvideo.gif. This is the image that will be revealed when a subscriber hovers over the static cover image. This will be placed into the code as a normal background image.
How to set up the CSS/HTML for faux video
Let’s look at how to use HTML and CSS to set up faux video for your next email campaign:
Using embedded CSS for faux video
This code goes in between the <head></head> tags at the top of your email.
.showvideo:hover{
opacity: 0 !important;
transition: 0.3s !important;
}
.showvideo { transition: 0.3s !important; }
The :hover style in this code changes the cover image to opacity: 0—effectively hiding the image—when a subscriber hovers over the section, revealing the animated GIF in the background. The 0.3 second transition is a cosmetic addition, adding a gradual fade to the hover in email clients where it’s supported. It’s added to both the hover and non-hover classes to ensure a smooth transition when a subscriber hovers over the image and mouses off. (Note: you don’t need to set a VML fallback for Outlook, because Outlook does not support hover.)
Using HTML for faux video
You’ll need to include two sections of code in your HTML, a <td> cell and an <img> cell.
This is the code for the containing <td> cell which loads the animated GIF as a background image, even when the cover image is on top and the interaction is not active.
<td class="w100p" background="http://campaigns.litmus.com/_email/2019/03_mar/20190315_March-NL/images/fauxvideo.gif"
bgcolor="#43a1e2"
style="width: 600px; max-width: 600px;
background-size: cover; background-position:center
!important; border-radius: 10px;
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);"
valign="top">
This is the code for the cover-play.jpg image that’s being hidden on :hover. As you can see, the CSS in the <head> has activated the “showvideo” class.
<img class="showvideo" src="http://campaigns.litmus.com/_email/2019/03_mar/20190315_March-NL/images/cover-play.jpg"
style="display:block; color: #ffffff;
font-family:'proxima_nova', Helvetica, Arial, sans-serif; font-weight:bold; font-size:36px;
line-height:40px; max-width: 100%; border-radius: 10px;" width="600" border="0" alt="Play" />
Now, just put it all together! You can see the complete sample faux video code in action in this CodePen.
Common faux video questions
Is faux video mobile responsive?
Absolutely! While the animated GIF will trigger on hover in desktop, it takes a tap or long-press to reveal the GIF on mobile. However, if a clickthrough is applied in your email, the link will launch the browser on tap and the subscriber will never see the video. Without a clickthrough, the GIF will play as expected. A long-press will reveal the GIF with or without a clickthrough.
Can you use retina images with this technique?
Yes! For the purposes of this example, we did not use retina images, but you can certainly use retina images with faux video if it makes sense for your overall email loading time. Be careful of using images or GIFs that are too large and will negatively impact your email’s loading time. Be sure to check out our post on retina images.
Why use opacity instead of other hiding methods?
Using display:none on a hovered element removes it from the document flow, and you end up getting an effect where the images keep disappearing and reappearing on hover, which does not reveal the animated GIF nor provide a smooth transition:
Using visibility:hidden would produce a similar flashing effect:
Using the opacity method to hide the cover image provides the smoothest experience, but it also has its drawbacks. Opacity is not supported in the following email clients:
- AOL
- Yahoo
- Outlook.com
This article was originally published on May 5, 2016 and was updated on August 31, 2022.
Boost efficiency and scale email development
Craft consistent, on-brand emails with Litmus. Create and store reusable templates, code modules, and more.
Alice Li is the Principal Email Engineer at Zillow.
