How To Code HTML5 Video Background In Email

By Kevin Mandeville, Content Designer at Litmus, @kevingotbounce

Recently, our company sent the launch email for The Email Design Conference. We knew we couldn’t promote an Email Design Conference with just any email, which is why we aimed for a forward-thinking and uniquely impressive one.

Naturally, we wanted it to be so amazing that people couldn’t help but attend the conference to learn about the tricks we used.

So, what did we decide to do? We used an HTML5 video background. That’s right: video background in an email.

Click here to view the web version of the email.

In addition, you can view the Litmus test results of the final email sent to subscribers (note some screenshots may be “wonky” due the video animation). The video background worked in the following clients:

  • Apple Mail
  • Outlook 2011 (Mac)

As you can see, the HTML5 video degrades gracefully across all clients with the fallback image.

We expected the email to get some attention, but the response we received blew our socks off. We’re proud to report that it prompted hundreds of tweets — generating comments, questions, and praise.

With such an overwhelming response, we fast-tracked this blog post breaking down the methodology and process behind the email. Here’s a step-by-step guide to the implementation of this responsive email.

Designing For Desktop

First off, we created a full-width table as a container for the top section of the email:

<table border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#f2ae44″ width=”100%”>

Within that table, we created a table cell with a “fallback” background image that acted as a static image for when the video was not loaded:

<td align=”center” bgcolor=”#f2ae44″ style=”padding: 0 0 50px 0; background-color: #f2ae44; background: url (http://pages.litmus.com/l/31032/2014-04-17/2hs7p/31032/17346/video_bg.jpg) top center no-repeat;background-size: cover;” width=”100%”>

The fallback background image looked like this:

html5-bg-video-fallback
Creating a fallback background image was necessary for two reasons:

  • The majority of email clients do not support video backgrounds.
  • Some subscribers may have trouble downloading the video background due to large file size.

It was also important to include a background color on both the <table> and <td> to ensure there was a fallback when images were disabled. This step was crucial for subscribers using Outlook, AOL Mail, and other email clients that block images by default, and was especially important for our email since the design uses white text in the video section—we wanted to avoid white text on a white background.

Next, we used a wrapper <div> for the video as the first element in the <td>:

<div class=”video-wrap”>

Since video backgrounds are only supported in Webkit-based clients (Apple Mail and Outlook 2011 for Mac), a Webkit-only media query was used to apply CSS to the <div> only when a Webkit client was detected:

@media screen and (-webkit-min-device-pixel-ratio: 0) { div[class="video-wrap"]{ height: 750px; position: relative; overflow: hidden; padding:0; margin:0;} }

The CSS applied to the “video-wrap” <div> above specifies a defined height, a relative position, eliminates any overflow of content inside, and eliminates any padding or margins.

Next, we put the <video> inside the “video-wrap” <div>:

<video width=”320″ height=”240″ style=”display: none” autoplay=”autoplay” class=”video”> <source src=”https://litmus.com/videos/TEDC-short-clips-tinted-compressed.mp4″ type=”video/mp4″/> </video >

We used an .mp4 version of the video since video background is only supported in Webkit-based email clients. We could have included an .ogg file for subscribers opening the web version in Firefox, but didn’t feel that the extra payload was necessary for our audience.

It’s also important to note that we hid the <video> by default using the display: none; property. Since the <video> only works in Webkit-supported email clients, we used a Webkit-targeted media query to overwrite the inline style to display the video for those clients. Here is the CSS 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;} }

Once again, we only targeted Webkit with this bit of CSS. We specified a minimum height and width of 100% to scale the video to the entire width of the “video-wrapper” <div>.

Since we previously defined the “video-wrapper” <div> to hide any content that overflows, the video wasn’t displayed beyond the specified dimensions of the “video-wrapper” <div>. The video was also given an absolute position (with 0px from the top and left of the page), a z-index value, and a new display value to show the video in Webkit.

Finally, we used an overlay <div> for the content that would be displayed over the video, placing it directly after the <video> tag. Here is the CSS for the “overlay” <div>:

@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;} }

A min-height of 100% was used to fill the entire height of the content area, along with a relative position and a higher z-index, so that the overlaid content would display on top of the video.

Then, we placed the content that we wanted to display over the video inside the “overlay” <div>. The rest of the content followed a standard, table-based structure so that it would render properly in all email clients.

<div class=”overlay”> <!— STANDARD EMAIL HTML / CONTENT OVER VIDEO —> <table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”600″> … </table> </div>

Designing For Mobile

Unfortunately, no major mobile email clients support the use of HTML5 video backgrounds. Most of our own mobile audience uses iOS, which displayed an unwanted play button when video was present.

html5-video-play-button

HTML5 video background on iPhone

We needed a way to disable the video from rendering on iOS devices, so we used targeted media queries specific to the device dimensions and pixel ratios of iOS devices to disable the video and ensure that button wouldn’t be rendered:

/* iPAD MEDIA QUERY */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { video[class="video"]{display: none !important;z-index:-1;}}/* iPAD 1 & 2, iPAD MINI MEDIA QUERY */ and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {video[class="video"]{display: none !important;z-index:-1;}}/* RETINA iPAD MEDIA QUERY */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {video[class="video"]{display: none !important;z-index:-1;}}/* iPHONE 5 MEDIA QUERY */ @media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 1) {video[class="video"]{display: none !important;z-index:-1;}}/* iPHONE 5S MEDIA QUERY */ @media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {video[class="video"]{display: none !important;z-index:-1;}}/* iPHONE 2G/3G/3GS MEDIA QUERY */ @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) {video[class="video"]{display: none !important;z-index:-1;}}/* iPHONE 4/4S MEDIA QUERY */ @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {video[class="video"]{display: none !important;z-index:-1;} }

Using these targeted media queries, we prevented the video from displaying on these devices by setting the display property to none. As an extra measure, a lower z-index ensured that the fallback background image in our <td> was displayed.

However, we still wanted to support the video background on mobile Webkit for viewing the web version or just to showcase the responsiveness on desktop, so the following CSS was applied:

/* WEBKIT, CHROME, SAFARI MEDIA QUERY @ 600px */ @media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 600px) { div[class="video-wrap"]{ height: 570px !important;}}/* WEBKIT, CHROME, SAFARI MEDIA QUERY @ 480px*/ @media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 480px) { div[class="video-wrap"]{ height: 440px !important;} video[class="video"]{ top:-75px; left:-200px;} }

The mobile CSS changed the height of the “video-wrap” <div> to accommodate for smaller image and font sizes and changed the positioning of the <video> to create a better alignment since its true dimensions were not changed.

Positive Feedback Galore!

Video backgrounds aren’t something you see often in emails. It took a lot of thought to implement it correctly, but it paid off — people loved it:

 

I can’t promise you’ll receive the same reaction if you deploy this technique, but it’s worth a try!

Editor’s note: This article has been corrected, as the original contained an error in the coding. We regret the error. 

This article was previously published on the blog of email marketing company Litmus, and is used with permission as part of The Best of the Marketing Web

Related Topics: Channel: Email Marketing | Features & Analysis | How To Guides: Email Marketing

Sponsored


About The Author: is a Marketing Land feature where we bring you a curated selection of previously-published marketing-related content that our editors believe is outstanding enough to deserve a wider audience.

Connect with the author via: Email | Twitter



Marketing Day:

Get the top marketing stories daily!  

Share

Other ways to share:
 

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. You can read more about our comments policy here.
  • http://www.icahbanjarmasin.com/ Icahbanjarmasin

    Smart…really I like it,thank you very much.

  • Dennis, ListsUK

    Awesome (and very clever!) email. Have you got any stats on what portion of their list viewed it in Apple Mail or Outlook 2011 (Mac)?

  • Bonnie Gibson

    Did it work on Outlook for a PC? Most of my leads come from Outlook 2010 or Outlook 365.

  • http://kevingotbounce.com/ Kevin Mandeville

    Hey Dennis! For our particular audience at Litmus, ~40% were able to view the email on Apple Mail and Outlook 2011 combined.

  • http://kevingotbounce.com/ Kevin Mandeville

    Hey Bonnie, unfortunately it does not work on Outlook for a PC. It only works on Outlook 2011 on Mac because it uses WebKit as a rendering engine, which is how we targeted the video implementation using CSS. Outlook 2010 uses Microsoft Word as a rendering engine which makes it very limited for advanced CSS techniques. Outlook 365 doesn’t support such techniques either.

  • Dennis, ListsUK

    Thanks Kevin.

Get Our News, Everywhere!

Daily Email:

Follow Marketing Land on Twitter @marketingland Like Marketing Land on Facebook Follow Marketing Land on Google+ Subscribe to Our Feed! Join our LinkedIn Group Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Marketing News!

Marketing Day is a once-per-day newsletter update - sign up below and get the news delivered to you!