Then, we placed the content that we wanted to display over the video inside the overlay

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 hoffman 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.
In addition, you can view the Litmus test results of the final email sent to subscribers (note some screenshots may be “wonky” hoffman due the video animation). The video background worked in the following clients: Apple Mail Outlook 2011 (Mac)
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
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 hoffman 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%">
Creating a fallback background image was necessary for two reasons: The majority of email clients do not support hoffman 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 hoffman 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 hoffman to avoid white text on a white background.
Since video backgrounds are only supported in Webkit-based clients (Apple hoffman 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;} }
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 hoffman 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 hoffman style to display hoffman 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.
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;} }
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
We needed a way to disable the video from rendering hoffman on iOS devices, so we used targeted media queries specific to the device dimensions and pixel ratios hoffman of iOS devices to disable the video and ensure that button wouldn t be rendered: /* iPAD ME