How to Code HTML5 Video Background in Email

[ 60 By

Last week, we sent the launch email for The Email Design Conference. We knew we couldn’t promote THE 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.


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 autoplay="autoplay"loop="loop" class="video" style="display: none;">
<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 or .ogv video 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:

<div class="overlay">

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 */
@media only screen and (min-device-width: 768px) 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:

Click here to read more tweets!

If you have any questions, please do not hesitate to ask in the comments below, or better yet, in the Litmus Community!

Get awesome emails—and details about The Email Design Conference

Don’t miss our next mind-blowing email—sign up to receive news and information about The Email Design Conference.

  • AJ Sipin

    This is awesome (disclaimer: I just skimmed through). Did you try this on an OGV file?

    • http://www.litmus.com Justine, Litmus

      Thanks! Do you mean an OGG file? Kevin does mention this above, saying, “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.”

      • AJ Sipin

        Aren’t OGG and OGV different formats?

        • http://kevingotbounce.com/ Kevin Mandeville

          .ogg is for audio and video, .ogv is for video only, and .oga is for audio only. As I mentioned in the article, I didn’t use this because of the lack of email clients that would have supported it and the web version of Firefox was not a big concern or priority for us to make the video work. But, the video would certainly work if you targeted Firefox with this media query @-moz-document url-prefix() {} and applied the video CSS in it with the proper .ogg/.ogv file in the as well.

  • florian_monfort

    Hey guys,

    Congratulations on the results !!

    I can see that you test a lot of web based clients, however I was wondering if you were able to try testing out Zimbra ?

    We use this a lot internally and we think a lot of people in our database use it too, so I think seeing the results in your article would certainly help!

    • http://kevingotbounce.com/ Kevin Mandeville

      I don’t test in Zimbra due to our audience (not many use Zimbra). If Zimbra doesn’t use WebKit as a rendering engine then the video would not have worked. As far as this particular email, the body{height:100%;} property would need to be removed in order to render the email properly (quirk of Zimbra). Hope this helps!

  • http://edmdesigner.com/ RolFic

    Cool design! We hope that other email clients will favor such fancy techniques as well :)

    • http://kevingotbounce.com/ Kevin Mandeville

      We second that! Thanks for the compliment =)

  • AdMMM

    I like your little comment at the top of the source code. Guilty as charged :)

    • http://kevingotbounce.com/ Kevin Mandeville

      Gotcha! Haha thanks =)

  • rspilhaus

    When I first viewed the email I viewed it on Airmail and missed the video, but was still blown away by the css animation! This is a pretty awesome email guys.

    How soon until Litmus has video testing capabilities in the app? ;)

    • http://kevingotbounce.com/ Kevin Mandeville

      Thanks so much for the compliment! And yeah, it’d be pretty cool to test all this interactively in Litmus huh? =)

  • Jason Kyle

    So, am I just being being dumb or is this code just a bit off… I see this: But then I see the style: video[class=”video”] but no where am I seeing class=”video” being applied. Also, why was there two media querys for the 5 and the 5s? You can’t turn off the retina display. The pixel ration would always be 2 wouldn’t it? My mind was blown by this email, and Im trying to put the pieces back together with this entry!

    • http://kevingotbounce.com/ Kevin Mandeville

      Hey Kyle,

      The video[class=”video”] CSS is being applied in the “webkit” media query @media screen and (-webkit-min-device-pixel-ratio: 0) {}.

      So the CSS reads:

      @media screen and (-webkit-min-device-pixel-ratio: 0) {
      video[class=”video”]{min-height: 100%; min-width: 100%;position: absolute;top: 0p;left: 0;z-index: 2;display:inline-block !important;}
      }

      And yes, technically the iPhone 5/5s media queries only needs to target a min-device-pixel ratio of 2. I used the min-device-pixel-ratio of 1 more as a fallback so to speak for testing purposes.

      Hope this helps!

      • Jon R. Humphrey

        @kevin_mandeville:disqus, I think @jasonkyle:disqus as pointing out that in the example code snippet in the article the class attribute is never applied to the video tag so how could the style in the media query be applied to the video content?

        • http://kevingotbounce.com/ Kevin Mandeville

          Doh! Thanks for pointing this out – it was a typo in the blog post. I updated the code snippet and it now has class=”video” on the element. I can assure you it actually had the class=”video” in the actual email haha.

  • http://www.twitter.com/notalyce Alyce

    This is so cool! Nice job, Litmus :D

    • http://kevingotbounce.com/ Kevin Mandeville

      Thanks Alyce! =D

  • Paul Peterson

    Amazingly, the video background also works in the 2008(!) version of Microsoft Entourage (Mac). I never saw *that* coming!

    • http://kevingotbounce.com/ Kevin Mandeville

      Wow! That’s really cool to know. Gotta love the Macs and their WebKit rendering – thanks for sharing =)

  • Arminator

    Yeah, sorry but WTF if it only shows in TWO (2) of umpteen-threeleven email clients. This might be fun, but is useless. I’m not impressed.

    • http://kevingotbounce.com/ Kevin Mandeville

      It’s not just about what clients it works in, but what clients it works in for your audience. For instance, ~30% of our audience uses Apple Mail, so it was worth it for us. Not to mention, it also works in the web version for those who viewed in Chrome/Safari. It ended up being a really successful experiment for us because of this!

      • Brandon DeWeese

        Great reply and totally agree. The desire and skills to push the limits of email design are needed to advance the medium, or it will ultimately become less effective.

    • http://camgould.com/ Cam

      You did see the part where it “degrades gracefully across all clients” right? If we all had this attitude, we would still be designing with IE6 front and foremost for development standards :p

  • http://www.dan123.co.uk/ Dan

    It’s awesome what you achieved. And for some, iPhone audience is much bigger. Well done guys

    • http://kevingotbounce.com/ Kevin Mandeville

      It’s too bad HTML5 video background isn’t supported on mobile yet for email, but a lot of the animation stuff is. Thanks!

      • remi_grumeau

        It’s actually a very good thing since most people pay for 3G/4G data plans on how much they use :)

  • Kim

    Really good article. But unfortunately not much use for B2B as primarily they use pcs. But there is hope for the future.

    • http://www.greenfisher.co.uk/ Martin

      KIm, if no-one pushes the boundaries, then nothing will be learnt. All this stuff will eventually filter its way down to the corporate B2B world.

      • Kim

        In no way was my comment negative. Simply commented that this would be better for b2c for now, and eventually (as you said) it will be ready for b2b. But there are other work arounds, as having the video graphic and a link to the video. Hopefully we will not have to use work arounds any more.

        • http://www.greenfisher.co.uk/ Martin

          That’s ok Kim – email design is probably the most frustrating area of development, we are even more at the mercy of our clients, and their old PCs and crappy email programmes, and clients who easily manage to bugger up responsive email templates by bunging in massive photos and wondering why it’s all gone wrong!

        • http://kevingotbounce.com/ Kevin Mandeville

          Hey Kim, we have a B2B audience and the video worked for ~40% of our total list. It really just comes down what your specific audience consists of!

  • http://camgould.com/ Cam

    Cool, thanks guys. I remember seeing this email and thinking “hmmmm… what wonderful juju is this?” :p

  • http://soundcloud.com/witnesstochange Witness to Change

    Does the video actually load the whole thing when using an iOS device? Or does the OS restrict that loading process.

    • http://kevingotbounce.com/ Kevin Mandeville

      HTML5 video does not get preloaded on mobile devices (see: http://www.stevesouders.com/blog/2013/04/12/html5-video-preload). And in the case of this email, the HTML5 video background was hidden for mobile, so there is actually no video on mobile for this email (either in a mobile email client or mobile browser).

  • http://blu6.co Craig Stump

    re: the Play button displaying on iOS – did you try settings “controls” to false on the VIDEO tag?

    • http://kevingotbounce.com/ Kevin Mandeville

      That wouldn’t matter for email because the background video doesn’t play and the poster doesn’t scale properly. There may be some other hacks around getting the poster of the video to scale properly in the background, but I think it’s way easier just to fall back to the background image.

  • Matt Shaw

    #SICK that is all I can say. My mind was literally blown. Thanks for the explanation too. Hats off to the masters.

    • http://kevingotbounce.com/ Kevin Mandeville

      Thanks so much!

  • madahmani

    The design and the idea are both nice and very interesting but it is unfortunate not to be able to see the “true” email on other email clients.
    I do understand that you already knew your audience and what they would be able to see.
    Thank you for the explanation. It was very instructive.

    • http://kevingotbounce.com/ Kevin Mandeville

      Glad you liked it! It’s all about knowing your audience and a lot of progressive enhancement/graceful degradation depending on your approach to tackle email client rendering. =)

  • Pingback: This Week In WordPress: May 12, 2014 - Max Foundry()

  • http://www.au.mobilepundits.com/ Mobile Pundits

    This is just excellent and inspiring. When I opened the developer tools in my browser too see the code and found another message there in the comments, I was just amazed, my mind was just filled with the possibilities and I couldn’t wait to apply that to my work.

    Thank you so much for this and please continue to keep the e-mail design field fresh with your experimentation.
    HTML5 mobile app development

  • Pingback: How To Code HTML5 Video Background In Email()

  • http://www.alunablue.com/ Raymond Pettitt

    Thanks for sharing this code for Embedding video in site background ..

    Video Backgrounds

  • Guest

    testing124

  • Jason Rodriguez

    Great post! Are you available for freelance stuff?

  • Pingback: Email Rocks: stop whining and embrace “offensive email design” | Powerspace()

  • Pingback: Email Marketing – Now With Video! – Business 2 Community | Pure Marketing Info()

  • Pingback: Video in Email? Here is What You Need to Know | WORTH SEO PANDA()

  • remi_grumeau

    i’ve made a complete test of video embed in an email lately, desktop, mobile & webmails : http://www.remi-grumeau.com/blog/2525-put-a-video-in-an-emailing-dominos-case-study

  • Jason Justice

    I just sent myself this email and on Android 4.4.2 the fallback image doesn’t display. Just a grey background. When I send a test email to myself with html5 video tag, I get the same grey box but I can see the whole thing as it’s not being used as a background. It looks like a broken video player. Any thoughts on video with current Android OS?

    • http://kevingotbounce.com/ Kevin Mandeville

      Hi Jason,

      Sorry for a late reply on this. Android Mail doesn’t support HTML5 video at the moment unfortunately. If it’s showing the video (or trying to), it’s reading the -webkit-min-device-pixel-ratio media query. You’d need to add a specific media query for the device dimensions of the Android or a general width breakpoint that hides the video and activates the fallback image, which my example doesn’t do. Hope this helps!

  • AJ Sipin

    Hi there, for the fallback image, I was trying to put in an animated gif, but it wasn’t showing it. So far, only jpg works, but I was wondering if you any insight on this?

    • http://kevingotbounce.com/ Kevin Mandeville

      Hi AJ,

      Not every email client supports animated gifs, which may be the problem. My colleague Jason wrote an awesome post on animated gifs in email here: https://litmus.com/blog/a-guide-to-animated-gifs-in-email

      • AJ Sipin

        Thanks for the quick response Kevin! One more thing, just about 10 mins ago, the bg video worked for me in Chrome 39.0.xxxx. I’m on a MAC OSX v10.9.5. Then I just changed the text in the copy > hit save > refreshed my Chrome, and now the bg video’s not working. I even restarted my browser. And the change I made to the text was nowhere near the code for the video. Any ideas?

        Anyway, I tested this yesterday (BG video, with animated GIF fallback BG) on 4 webmail clients, and my iphone. In case you’re interested (again I’m on a Mac):

        1) AOL on FF 35.0 – BG anim GIF rendered
        2) AOL on Chrome 39.0.2171.99 – BG anim GIF rendered
        3) Gmail on FF 35.0 – BG color only rendered; no BG video, no fallback animated GIF
        4) Gmail on Chrome 39.0.2171.99 – BG color only rendered; no BG video, no fallback animated GIF
        5) Outlook.com on FF 35.0 – BG color only rendered; no BG video, no fallback animated GIF
        6) Outlook.com on Chrome 39.0.2171.99 – BG color only rendered; no BG video, no fallback animated GIF
        7) Yahoo on Chrome 39.0.2171.99 – BG color only rendered; no BG video, no fallback animated GIF
        8) Yahoo on FF 35.0 – BG color only rendered; no BG video, no fallback animated GIF
        9) iPhone 5 (iOS 7.1.1 for my gmail acct, native client webkit) – BG anim GIF rendered

        • http://kevingotbounce.com/ Kevin Mandeville

          I’d honestly need to see the actual code to diagnose anything. Can you share your code with Litmus Builder (which is free on all Litmus accounts)? Here’s a video on how to share emails with Litmus Builder: https://litmus.wistia.com/medias/tjxqxyhtuk

          • AJ Sipin

            Hey Kevin, I had to stop working on this for a few days. Anyway, I corrected a few areas in my code. Gmail now shows the fallback animated GIF as a background.

            As far as client support, are there any new updates or is this still supported by the 2 clients (Apple Mail and Outlook 2011 on Mac)? Thanks again!

          • http://kevingotbounce.com/ Kevin Mandeville

            No new updates – still only supported by Apple Mail and Outlook 2011/2015 for Mac.

  • Pingback: Pourquoi et comment ajouter une vidéo dans vos campagnes d’emailing ? – Le blog de SimpleMail()