Faux Video: A Fallback for Video in Email

[ 0 By

There’s absolutely no denying the power of video marketing. Video content has the power to tell stories more quickly than static images ever could. It’s more emotional. It lets you communicate within seconds what would have taken paragraphs to describe in writing. So it’s no surprise that many email marketers are interested in including video in their emails—only to learn that most email clients don’t offer support for videos.

But while real videos aren’t supported in most clients, that doesn’t mean you have to say goodbye to the idea of adding video-like interactions to your campaigns. Enter: 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. The most popular one was created by fellow #emailgeek Kristian Robinson who presented his approach of using CSS animation to scroll through a sprite sheet of individual video frames from at Litmus Live London in 2018. You should check out his talk below or tune in to the Email Design Podcast #71 where we covered Kristian’s technique.

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

That’s over 64% of the overall email client market share supporting this technique. 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 imitate live video

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.

  1. The static cover image
    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!

    The static cover image that covers the background GIF underneath.
  2. 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.

    The animated GIF background image.

Setting up the CSS/HTML

Let’s look at how to use HTML and CSS to set up faux video for your next email campaign:

Embedded CSS

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.)

HTML

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 questions on faux video

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

Add faux videos to your next email campaign

We can’t wait to see more faux videos out there. So if you use the faux video technique in an upcoming email, we’d love to see it! Feel free to share a link to your design in the comments below.

And if you have any questions, please let us hear them!