{"id":15940,"date":"2014-04-22T16:19:00","date_gmt":"2014-04-22T16:19:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=15940"},"modified":"2025-04-08T16:31:08","modified_gmt":"2025-04-08T20:31:08","slug":"how-to-code-html5-video-background-in-email","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email","title":{"rendered":"How to Code HTML5 Video Background in Email"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_c022bc39d7be2503d8819d720cf530b9\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>We knew we couldn\u2019t promote <a rel=\"noopener\" href=\"https:\/\/litmus.com\/conference\" target=\"_blank\" rel=\"noopener\">Litmus Live 2014 (formerly The Email Design Conference)<\/a> 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\u2019t help but attend the conference to learn about the tricks we used, specifically: how to code HTML5 video background in email.<\/p>\n<p>That\u2019s right: <strong>video background in an email<\/strong>.<\/p>\n<figure style=\"margin: -20px -30px 15px -100px;\"><script type=\"text\/javascript\" src=\"https:\/\/litmus.com\/builder\/embed\/v1.js\" class=\"builder-embed\" data-token=\"a908938\"><\/script><\/figure>\n<p>In addition, you can view the <a rel=\"noopener\" href=\"https:\/\/litmus.com\/checklist\/emails\/public\/44b5a50\" target=\"_blank\" rel=\"noopener\">Litmus test results<\/a> of the final email sent to subscribers (note some screenshots may be &#8220;wonky&#8221; due the video animation). The video background worked in the following clients:<\/p>\n<ul>\n<li>Apple Mail<\/li>\n<li>Outlook 2011 (Mac)<\/li>\n<\/ul>\n<p>As you can see, the HTML5 video degrades gracefully across all clients with the fallback image.<\/p>\n<p>We expected the email to get some attention, but the response we received blew our socks off. We\u2019re proud to report that it prompted hundreds of tweets\u2014generating 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\u2019s a step-by-step guide to the implementation of this responsive email.<\/p>\n<h2>DESIGNING FOR DESKTOP<\/h2>\n<p>First off, we created a full-width table as a container for the top section of the email:<\/p>\n<pre><code style=\"background: #272822; color: #ffffff; margin: 0 0 25px 0; word-wrap: break-word;\">&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"#f2ae44\" width=\"100%\"&gt;<\/code><\/pre>\n<p>Within that table, we created a table cell with a \u201cfallback\u201d background image that acted as a static image for when the video was not loaded:<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; word-wrap: break-word; color: #ffffff;\">&lt;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%\"&gt;<\/code><\/pre>\n<p>The fallback <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\" target=\"_blank\">email background image<\/a> looked like this:<\/p>\n<figure id=\"post-7871 media-7871\" class=\"aligncenter\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/litmus.com\/blog\/wp-content\/uploads\/2014\/04\/html5-bg-video-fallback.jpg\" alt=\"html5-bg-video-fallback\" \/><\/figure>\n<p>Creating a fallback background image was necessary for two reasons:<\/p>\n<ul>\n<li>The majority of email clients do not support video backgrounds.<\/li>\n<li>Some subscribers may have trouble downloading the video background due to large file size.<\/li>\n<\/ul>\n<p>It was also important to include a <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/background-colors-html-email\/\">background color<\/a> on both the &lt;table&gt; and &lt;td&gt; 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\u2014we wanted to avoid white text on a white background.<\/p>\n<p>Next, we used a wrapper &lt;div&gt; for the video as the first element in the &lt;td&gt;:<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; word-wrap: break-word; color: #ffffff;\">&lt;div class=\"video-wrap\"&gt;<\/code><\/pre>\n<p>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 &lt;div&gt; <i>only when a Webkit client was detected<\/i>:<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; word-wrap: break-word; color: #ffffff;\">@media screen and (-webkit-min-device-pixel-ratio: 0) {\r\n div[class=\"video-wrap\"]{\r\n height: 750px;\r\n position: relative;\r\n overflow: hidden;\r\n padding:0;\r\n margin:0;}\r\n }<\/code><\/pre>\n<p>The CSS applied to the \u201cvideo-wrap\u201d &lt;div&gt; above specifies a defined height, a relative position, eliminates any overflow of content inside, and eliminates any padding or margins.<\/p>\n<p>Next, we put the &lt;video&gt; inside the \u201cvideo-wrap\u201d &lt;div&gt;:<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; word-wrap: break-word; color: #ffffff;\">&lt;video autoplay=\"autoplay\"loop=\"loop\" class=\"video\" style=\"display: none;\"&gt;\r\n&lt;source src=\"https:\/\/litmus.com\/videos\/TEDC-short-clips-tinted-compressed.mp4\" type=\"video\/mp4\"&gt;\r\n&lt;\/video&gt;<\/code><\/pre>\n<p>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\u2019t feel that the extra payload was necessary for our audience.<\/p>\n<p>It&#8217;s also important to note that we hid the &lt;video&gt; by default using the display: none; property. Since the &lt;video&gt; 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 &lt;video&gt;:<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; word-wrap: break-word; color: #ffffff;\">@media screen and (-webkit-min-device-pixel-ratio: 0) {\r\nvideo[class=\"video\"]{\r\nmin-height: 100%;\r\nmin-width: 100%;\r\nposition: absolute;\r\ntop: 0;\r\nleft: 0;\r\nz-index: 2;\r\ndisplay:inline-block !important;}\r\n}<\/code><\/pre>\n<p>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 \u201cvideo-wrapper\u201d &lt;div&gt;. Since we previously defined the \u201cvideo-wrapper\u201d &lt;div&gt; to hide any content that overflows, the video wasn\u2019t displayed beyond the specified dimensions of the \u201cvideo-wrapper\u201d &lt;div&gt;. 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.<\/p>\n<p>Finally, we used an overlay &lt;div&gt; for the content that would be displayed over the video, placing it directly after the &lt;video&gt; tag:<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; word-wrap: break-word; color: #ffffff;\">&lt;div class=\"overlay\"&gt;<\/code><\/pre>\n<p>Here is the CSS for the \u201coverlay\u201d &lt;div&gt;:<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; word-wrap: break-word; color: #ffffff;\">@media screen and (-webkit-min-device-pixel-ratio: 0) {\r\ndiv[class=\"overlay\"]{\r\nheight: 100%;\r\nmin-height: 100%;\r\nposition: relative;\r\nmargin: 0 auto;\r\npadding: 0 20px;\r\nz-index:3;}\r\n}<\/code><\/pre>\n<p>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.<\/p>\n<p>Then, we placed the content that we wanted to display over the video inside the \u201coverlay\u201d &lt;div&gt;. The rest of the content followed a standard, table-based structure so that it would render properly in all email clients.<\/p>\n<pre><code style=\"background: #272822; margin-top: 0; word-wrap: break-word; color: #ffffff;\">&lt;div class=\"overlay\"&gt;\r\n&lt;!\u2014 STANDARD EMAIL HTML \/ CONTENT OVER VIDEO \u2014&gt;\r\n&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\"&gt;\r\n...\r\n&lt;\/table&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<h2>Designing for Mobile<\/h2>\n<p>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.<\/p>\n<figure id=\"post-7853 media-7853\" class=\"aligncenter\" style=\"margin: 0;\"><img decoding=\"async\" class=\" shaded\" style=\"width: 320px;\" src=\"https:\/\/litmus.com\/blog\/wp-content\/uploads\/2014\/04\/html5-video-play-button.jpg\" alt=\"html5-video-play-button\" \/><\/figure>\n<p style=\"font-size: 14px; margin: 15px 0 25px 0; text-align: center;\">HTML5 video background on iPhone<\/p>\n<p>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\u2019t be rendered:<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; word-wrap: break-word; color: #ffffff;\">\/* iPAD MEDIA QUERY *\/\r\n@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {\r\nvideo[class=\"video\"]{display: none !important;z-index:-1;}\r\n}\r\n\r\n\/* iPAD 1 &amp; 2, iPAD MINI MEDIA QUERY *\/\r\n@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {\r\nvideo[class=\"video\"]{display: none !important;z-index:-1;}\r\n}\r\n\r\n\/* RETINA iPAD MEDIA QUERY *\/\r\n@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {\r\nvideo[class=\"video\"]{display: none !important;z-index:-1;}\r\n}\r\n\r\n\/* iPHONE 5 MEDIA QUERY *\/\r\n@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 1){\r\nvideo[class=\"video\"]{display: none !important;z-index:-1;}\r\n}\r\n\r\n\/* iPHONE 5S MEDIA QUERY *\/\r\n@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2){\r\nvideo[class=\"video\"]{display: none !important;z-index:-1;}\r\n}\r\n\r\n\/* iPHONE 2G\/3G\/3GS MEDIA QUERY *\/\r\n@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1){\r\nvideo[class=\"video\"]{display: none !important;z-index:-1;}\r\n}\r\n\r\n\/* iPHONE 4\/4S MEDIA QUERY *\/\r\n@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){\r\nvideo[class=\"video\"]{display: none !important;z-index:-1;}\r\n}<\/code><\/pre>\n<p>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 <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\/\">background image<\/a> in our &lt;td&gt; was displayed.<\/p>\n<p>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:<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; word-wrap: break-word; color: #ffffff;\">\/* WEBKIT, CHROME, SAFARI MEDIA QUERY @ 600px *\/\r\n@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 600px) {\r\ndiv[class=\"video-wrap\"]{\r\nheight: 570px !important;}\r\n}\r\n\r\n\/* WEBKIT, CHROME, SAFARI MEDIA QUERY @ 480px*\/\r\n@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 480px) {\r\ndiv[class=\"video-wrap\"]{\r\nheight: 440px !important;}\r\nvideo[class=\"video\"]{\r\ntop:-75px;\r\nleft:-200px;}\r\n}<\/code><\/pre>\n<p>&nbsp;<\/p>\n<p>The mobile CSS changed the height of the \u201cvideo-wrap\u201d &lt;div&gt; to accommodate for smaller image and font sizes and changed the positioning of the &lt;video&gt; to create a better alignment since its true dimensions were not changed.<\/p>\n<h2>POSITIVE FEEDBACK GALORE!<\/h2>\n<p>Video backgrounds aren\u2019t something you see often in emails (unlike <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/video-in-email\" rel=\"noopener\" target=\"_blank\">embed video in email<\/a>). It took a lot of thought to implement it correctly, but it paid off\u2014people loved it:<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">probably the best looking email i\u2019ve ever received <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/t.co\/kCuXFB5vMx\">http:\/\/t.co\/kCuXFB5vMx<\/a> <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/litmusapp?ref_src=twsrc%5Etfw\">@litmusapp<\/a><\/p>\n<p>&mdash; emmet fe\u0307rdle (@orangemmet) <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/orangemmet\/status\/456887504860221440?ref_src=twsrc%5Etfw\">April 17, 2014<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">.<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/litmusapp?ref_src=twsrc%5Etfw\">@litmusapp<\/a> You just blew my mind with the the Design Conference email I just got. VERY cool. <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/hashtag\/ImNotWorthy?src=hash&amp;ref_src=twsrc%5Etfw\">#ImNotWorthy<\/a><\/p>\n<p>&mdash; Bruce Kaldor (@BruceKaldor) <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/BruceKaldor\/status\/456895261088808960?ref_src=twsrc%5Etfw\">April 17, 2014<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">\u201cWoah\u201d came out of my mouth when I opened this email w\/ bg video from <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/litmusapp?ref_src=twsrc%5Etfw\">@litmusapp<\/a> For teh LOLz, geek out on the source <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/t.co\/QMcbLG1S11\">http:\/\/t.co\/QMcbLG1S11<\/a><\/p>\n<p>&mdash; Five &amp; Done Creative (@FiveDone) <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/FiveDone\/status\/456880190128279552?ref_src=twsrc%5Etfw\">April 17, 2014<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>https:\/\/twitter.com\/nokapixel\/status\/456869510952128512<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/litmusapp?ref_src=twsrc%5Etfw\">@litmusapp<\/a> Our email mktg team was huddled, staring at the screen in awe. I went all Giggity! <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/t.co\/hhVnnvzHHc\">http:\/\/t.co\/hhVnnvzHHc<\/a><\/p>\n<p>&mdash; Frank Juval (@FrankJuval) <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/FrankJuval\/status\/456890621312004097?ref_src=twsrc%5Etfw\">April 17, 2014<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">The awesome <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/litmusapp?ref_src=twsrc%5Etfw\">@litmusapp<\/a> email we just received for their Email Design Conference sparked a mini Email Design Conference in the office!<\/p>\n<p>&mdash; Judah Stevenson (@judahstevenson) <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/judahstevenson\/status\/456875881966075904?ref_src=twsrc%5Etfw\">April 17, 2014<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">If ever there was a baller status for html email design, <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/litmusapp?ref_src=twsrc%5Etfw\">@litmusapp<\/a> just took that crown. The Email Design Conference email was awesome<\/p>\n<p>&mdash; Gregg Henry (@GreggHenry) <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/GreggHenry\/status\/456917406573539328?ref_src=twsrc%5Etfw\">April 17, 2014<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/litmusapp?ref_src=twsrc%5Etfw\">@litmusapp<\/a>, just got your Con Save The Date email and WOW. Just WOW.<\/p>\n<p>&mdash; Laura Earley (@lauraearley) <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/lauraearley\/status\/456870373662150656?ref_src=twsrc%5Etfw\">April 17, 2014<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">Seriously check out this <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/litmusapp?ref_src=twsrc%5Etfw\">@litmusapp<\/a> email &#8211; <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/t.co\/sio6WY7GXV\">http:\/\/t.co\/sio6WY7GXV<\/a> Mind being blown right now<\/p>\n<p>&mdash; Andrew King (@akingkiwi) <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/akingkiwi\/status\/456926685842374656?ref_src=twsrc%5Etfw\">April 17, 2014<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">Litmus! Hoooooow are you doing this. Game changer. <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/litmusapp?ref_src=twsrc%5Etfw\">@litmusapp<\/a> <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/t.co\/vjbfMNJ0q9\">http:\/\/t.co\/vjbfMNJ0q9<\/a><\/p>\n<p>&mdash; Alessandra Souers (@asouers) <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/asouers\/status\/456907370543972352?ref_src=twsrc%5Etfw\">April 17, 2014<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>https:\/\/twitter.com\/pbiolsi\/status\/456884431866044416<\/p>\n<p>https:\/\/twitter.com\/gradenh\/status\/456967261878640640<\/p>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/search?q=%40litmusapp%20since%3A2014-04-17%20until%3A2014-04-18&amp;src=typd&amp;f=realtime\" target=\"_blank\" rel=\"noopener\">Click here to read more tweets<\/a>!<\/p>\n<p>If you have any questions, please do not hesitate to ask in the comments below, or better yet, in the <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\" target=\"_blank\" rel=\"noopener\">Litmus Community<\/a>!<\/p>\n<h2>Get awesome emails<\/h2>\n<p>Don\u2019t miss our next mind-blowing email\u2014sign up to receive news and information about everything happening at Litmus.<\/p>\n<p><iframe style=\"border: 0; margin-top: 25px;\" src=\"https:\/\/go.pardot.com\/l\/31032\/2014-02-17\/hsgc\" width=\"100%\" height=\"200\" frameborder=\"0\"><\/iframe><\/p>\n<p><script src=\"\/\/platform.twitter.com\/oct.js\" type=\"text\/javascript\"><\/script><br \/>\n<script type=\"text\/javascript\">\ntwttr.conversion.trackPid('l514s', { tw_sale_amount: 0, tw_order_quantity: 0 });<\/script><br \/>\n<noscript><br \/>\n<img decoding=\"async\" height=\"1\" width=\"1\" style=\"display:none;\" alt=\"\" src=\"https:\/\/analytics.twitter.com\/i\/adsct?txn_id=l514s&#038;p_id=Twitter&#038;tw_sale_amount=0&#038;tw_order_quantity=0\" \/><br \/>\n<img decoding=\"async\" height=\"1\" width=\"1\" style=\"display:none;\" alt=\"\" src=\"\/\/t.co\/i\/adsct?txn_id=l514s&#038;p_id=Twitter&#038;tw_sale_amount=0&#038;tw_order_quantity=0\" \/><\/noscript><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>We knew we couldn\u2019t promote Litmus Live 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\u2019t help but attend the conference to learn about the tricks we used. Specifically: how to code HTML5 video background in email.<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"blog_category":[],"class_list":["post-15940","post","type-post","status-publish","format-standard","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Code HTML5 Video Background in Email - Litmus<\/title>\n<meta name=\"description\" content=\"We knew we couldn\u2019t promote Litmus Live 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\u2019t help but attend the conference to learn about the tricks we used. Specifically: how to code HTML5 video background in email.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Code HTML5 Video Background in Email\" \/>\n<meta property=\"og:description\" content=\"We knew we couldn\u2019t promote Litmus Live 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\u2019t help but attend the conference to learn about the tricks we used. Specifically: how to code HTML5 video background in email.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2014-04-22T16:19:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-08T20:31:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"314\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Code HTML5 Video Background in Email - Litmus","description":"We knew we couldn\u2019t promote Litmus Live 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\u2019t help but attend the conference to learn about the tricks we used. Specifically: how to code HTML5 video background in email.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email","og_locale":"en_US","og_type":"article","og_title":"How to Code HTML5 Video Background in Email","og_description":"We knew we couldn\u2019t promote Litmus Live 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\u2019t help but attend the conference to learn about the tricks we used. Specifically: how to code HTML5 video background in email.","og_url":"https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2014-04-22T16:19:00+00:00","article_modified_time":"2025-04-08T20:31:08+00:00","og_image":[{"width":600,"height":314,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email"},"author":{"name":"","@id":""},"headline":"How to Code HTML5 Video Background in Email","datePublished":"2014-04-22T16:19:00+00:00","dateModified":"2025-04-08T20:31:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email","url":"https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email","name":"How to Code HTML5 Video Background in Email - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"datePublished":"2014-04-22T16:19:00+00:00","dateModified":"2025-04-08T20:31:08+00:00","description":"We knew we couldn\u2019t promote Litmus Live 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\u2019t help but attend the conference to learn about the tricks we used. Specifically: how to code HTML5 video background in email.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/how-to-code-html5-video-background-in-email#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to Code HTML5 Video Background in Email"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=15940"}],"version-history":[{"count":5,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15940\/revisions"}],"predecessor-version":[{"id":114224,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15940\/revisions\/114224"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=15940"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=15940"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=15940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}