How to code video into the background of a HTML email?

 In Code

Using HTML5 video for Apple Mail, Outlook (Mac) users and displaying an image for all other users.

The video background worked in the following email clients:

  • Apple Mail
  • Outlook 2011 (Mac)

HTML5 video degrades gracefully across all clients with the fallback image for those without Apple Mail or Outlook for Mac.

Here’s how it was done.

Designing for desktop

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


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


Creating a fallback background image was necessary for two reasons:

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

It was also important to include a background colour on both the
and   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 the email since the design uses white text in the video section (to avoid white text on a white background).

Next, we used a wrapper

for the video as the first element in the:

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

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”

above specifies a defined height, a relative position, eliminates any overflow of content inside, and eliminates any padding or margins.

Next, we put the

 

:

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 their audience.

It’s also important to note that the

@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, they only targeted Webkit with this bit of CSS. A minimum height and width of 100% to scale the video to the entire width of the “video-wrapper”

was specified. Since they previously defined the “video-wrapper”

to hide any content that overflows, the video wasn’t displayed beyond the specified dimensions of the “video-wrapper”

 

. 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, they used an overlay

 

for the content that would be displayed over the video, placing it directly after the tag:


Here is the CSS for the “overlay”

 

:

@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”

 

. The rest of the content followed a standard, table-based structure so that it would render properly in all email clients.


<!— STANDARD EMAIL HTML / CONTENT OVER VIDEO —> ...

Designing for mobile

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

A way to disable the video from rendering on iOS devices, is to target 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

 

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”

 

to accommodate for smaller image and font sizes and changed the positioning of the to create a better alignment since its true dimensions were not changed.

Full article: litmus.com

Recent Posts
Contact Us

Send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search