How to create a background HTML5 video in an email message
There are cases when, to maximize the effect of the mailing list , designers and marketers have to invent non-standard moves. The Litmus mail service team in their blog talked about using HTML5 to create a letter with video as background.
The video was played in the mail programs Apple Mail and Outlook 2011 for Mac. The rest of the email clients displayed a normal image. Below is a step by step guide to creating such a video letter.
')
Desktop Layout
First of all, you should create a full-sized table that will become a container for the top of the letter:
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#f2ae44" width="100%"> Inside the table there is a cell containing an image for “Plan B” if the video does not load:
<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%"> This “spare” image looked like this:
This picture was needed for two reasons:
- Most email clients do not support background video in emails.
- Some subscribers may have difficulty downloading videos due to the large file size.
It was also important to indicate the background color and
, , (, Outlook) — , , , .
:
<div class="video-wrap">
Webkit-based (Apple Mail, Outlook 2011 Mac), media query CSS Webkit-:
@media screen and (-webkit-min-device-pixel-ratio: 0) { div[class="video-wrap"]{ height: 750px; position: relative; overflow: hidden; padding:0; margin:0;} }
CSS «» , , .
:
<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>
Webkit-, .mp4. .ogg .ogv, Firefox, Litmus , , .
: display: none. </code> Webkit-, media query «» -: <source lang="css"> @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;} } </source> «» . 100%, «» <code><div></code>. , <code><div></code> «» , . (0px ), z- display Webkit. <code><div></code> — , . <code><div></code> <code><video></code>: <source lang="html"> <div class="overlay"> </source> CSS : <source lang="css"> @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;} } </source> Min-height 100% , , z- , . <code><div></code> . , . <source lang="css"> <div class="overlay"> <!— STANDARD EMAIL HTML / CONTENT OVER VIDEO —> <table border="0" cellpadding="0" cellspacing="0" width="600"> ... </table> </div> </source> <h4> </h4> , HTML5-. , , iOS, : <img src="https://habrastorage.org/files/be1/147/016/be114701690f48e4877a33ed99f03d74.jpg"/> - iOS, media queries , iOS- ( play): <source lang="css"> /* 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;} } </source> display none, . , z- , , <code><td></code>. , Webkit- «» . CSS: <source lang="css"> /* 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;} } </source> CSS <code><div></code>, « », , <code><video></code> , . Twitter, , , ( <a href="https://litmus.com/blog/how-to-code-html5-video-background-in-email"></a>). <h5> «»:</h5> <ul> <li><a href="http://habrahabr.ru/company/pechkin/blog/255819/">How-to: email-</a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/257915/"> </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/258313/"> media queries email-: </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/259333/"> : plain-text </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/259909/">How-to: email-</a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/260945/"> email-</a></li> </ul>, , (, Outlook) — , , , .
:
<div class="video-wrap">
Webkit-based (Apple Mail, Outlook 2011 Mac), media query CSS Webkit-:
@media screen and (-webkit-min-device-pixel-ratio: 0) { div[class="video-wrap"]{ height: 750px; position: relative; overflow: hidden; padding:0; margin:0;} }
CSS «» , , .
:
<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>
Webkit-, .mp4. .ogg .ogv, Firefox, Litmus , , .
: display: none. </code> Webkit-, media query «» -: <source lang="css"> @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;} } </source> «» . 100%, «» <code><div></code>. , <code><div></code> «» , . (0px ), z- display Webkit. <code><div></code> — , . <code><div></code> <code><video></code>: <source lang="html"> <div class="overlay"> </source> CSS : <source lang="css"> @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;} } </source> Min-height 100% , , z- , . <code><div></code> . , . <source lang="css"> <div class="overlay"> <!— STANDARD EMAIL HTML / CONTENT OVER VIDEO —> <table border="0" cellpadding="0" cellspacing="0" width="600"> ... </table> </div> </source> <h4> </h4> , HTML5-. , , iOS, : <img src="https://habrastorage.org/files/be1/147/016/be114701690f48e4877a33ed99f03d74.jpg"/> - iOS, media queries , iOS- ( play): <source lang="css"> /* 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;} } </source> display none, . , z- , , <code><td></code>. , Webkit- «» . CSS: <source lang="css"> /* 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;} } </source> CSS <code><div></code>, « », , <code><video></code> , . Twitter, , , ( <a href="https://litmus.com/blog/how-to-code-html5-video-background-in-email"></a>). <h5> «»:</h5> <ul> <li><a href="http://habrahabr.ru/company/pechkin/blog/255819/">How-to: email-</a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/257915/"> </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/258313/"> media queries email-: </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/259333/"> : plain-text </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/259909/">How-to: email-</a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/260945/"> email-</a></li> </ul> , , (, Outlook) — , , , .
:
<div class="video-wrap">
Webkit-based (Apple Mail, Outlook 2011 Mac), media query CSS Webkit-:
@media screen and (-webkit-min-device-pixel-ratio: 0) { div[class="video-wrap"]{ height: 750px; position: relative; overflow: hidden; padding:0; margin:0;} }
CSS «» , , .
:
<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>
Webkit-, .mp4. .ogg .ogv, Firefox, Litmus , , .
: display: none. </code> Webkit-, media query «» -: <source lang="css"> @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;} } </source> «» . 100%, «» <code><div></code>. , <code><div></code> «» , . (0px ), z- display Webkit. <code><div></code> — , . <code><div></code> <code><video></code>: <source lang="html"> <div class="overlay"> </source> CSS : <source lang="css"> @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;} } </source> Min-height 100% , , z- , . <code><div></code> . , . <source lang="css"> <div class="overlay"> <!— STANDARD EMAIL HTML / CONTENT OVER VIDEO —> <table border="0" cellpadding="0" cellspacing="0" width="600"> ... </table> </div> </source> <h4> </h4> , HTML5-. , , iOS, : <img src="https://habrastorage.org/files/be1/147/016/be114701690f48e4877a33ed99f03d74.jpg"/> - iOS, media queries , iOS- ( play): <source lang="css"> /* 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;} } </source> display none, . , z- , , <code><td></code>. , Webkit- «» . CSS: <source lang="css"> /* 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;} } </source> CSS <code><div></code>, « », , <code><video></code> , . Twitter, , , ( <a href="https://litmus.com/blog/how-to-code-html5-video-background-in-email"></a>). <h5> «»:</h5> <ul> <li><a href="http://habrahabr.ru/company/pechkin/blog/255819/">How-to: email-</a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/257915/"> </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/258313/"> media queries email-: </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/259333/"> : plain-text </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/259909/">How-to: email-</a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/260945/"> email-</a></li> </ul>, , (, Outlook) — , , , .
:
<div class="video-wrap">
Webkit-based (Apple Mail, Outlook 2011 Mac), media query CSS Webkit-:
@media screen and (-webkit-min-device-pixel-ratio: 0) { div[class="video-wrap"]{ height: 750px; position: relative; overflow: hidden; padding:0; margin:0;} }
CSS «» , , .
:
<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>
Webkit-, .mp4. .ogg .ogv, Firefox, Litmus , , .
: display: none. </code> Webkit-, media query «» -: <source lang="css"> @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;} } </source> «» . 100%, «» <code><div></code>. , <code><div></code> «» , . (0px ), z- display Webkit. <code><div></code> — , . <code><div></code> <code><video></code>: <source lang="html"> <div class="overlay"> </source> CSS : <source lang="css"> @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;} } </source> Min-height 100% , , z- , . <code><div></code> . , . <source lang="css"> <div class="overlay"> <!— STANDARD EMAIL HTML / CONTENT OVER VIDEO —> <table border="0" cellpadding="0" cellspacing="0" width="600"> ... </table> </div> </source> <h4> </h4> , HTML5-. , , iOS, : <img src="https://habrastorage.org/files/be1/147/016/be114701690f48e4877a33ed99f03d74.jpg"/> - iOS, media queries , iOS- ( play): <source lang="css"> /* 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;} } </source> display none, . , z- , , <code><td></code>. , Webkit- «» . CSS: <source lang="css"> /* 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;} } </source> CSS <code><div></code>, « », , <code><video></code> , . Twitter, , , ( <a href="https://litmus.com/blog/how-to-code-html5-video-background-in-email"></a>). <h5> «»:</h5> <ul> <li><a href="http://habrahabr.ru/company/pechkin/blog/255819/">How-to: email-</a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/257915/"> </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/258313/"> media queries email-: </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/259333/"> : plain-text </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/259909/">How-to: email-</a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/260945/"> email-</a></li> </ul> , , (, Outlook) — , , , .
:
<div class="video-wrap">
Webkit-based (Apple Mail, Outlook 2011 Mac), media query CSS Webkit-:
@media screen and (-webkit-min-device-pixel-ratio: 0) { div[class="video-wrap"]{ height: 750px; position: relative; overflow: hidden; padding:0; margin:0;} }
CSS «» , , .
:
<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>
Webkit-, .mp4. .ogg .ogv, Firefox, Litmus , , .
: display: none. </code> Webkit-, media query «» -: <source lang="css"> @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;} } </source> «» . 100%, «» <code><div></code>. , <code><div></code> «» , . (0px ), z- display Webkit. <code><div></code> — , . <code><div></code> <code><video></code>: <source lang="html"> <div class="overlay"> </source> CSS : <source lang="css"> @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;} } </source> Min-height 100% , , z- , . <code><div></code> . , . <source lang="css"> <div class="overlay"> <!— STANDARD EMAIL HTML / CONTENT OVER VIDEO —> <table border="0" cellpadding="0" cellspacing="0" width="600"> ... </table> </div> </source> <h4> </h4> , HTML5-. , , iOS, : <img src="https://habrastorage.org/files/be1/147/016/be114701690f48e4877a33ed99f03d74.jpg"/> - iOS, media queries , iOS- ( play): <source lang="css"> /* 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;} } </source> display none, . , z- , , <code><td></code>. , Webkit- «» . CSS: <source lang="css"> /* 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;} } </source> CSS <code><div></code>, « », , <code><video></code> , . Twitter, , , ( <a href="https://litmus.com/blog/how-to-code-html5-video-background-in-email"></a>). <h5> «»:</h5> <ul> <li><a href="http://habrahabr.ru/company/pechkin/blog/255819/">How-to: email-</a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/257915/"> </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/258313/"> media queries email-: </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/259333/"> : plain-text </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/259909/">How-to: email-</a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/260945/"> email-</a></li> </ul>, , (, Outlook) — , , , .
:
<div class="video-wrap">
Webkit-based (Apple Mail, Outlook 2011 Mac), media query CSS Webkit-:
@media screen and (-webkit-min-device-pixel-ratio: 0) { div[class="video-wrap"]{ height: 750px; position: relative; overflow: hidden; padding:0; margin:0;} }
CSS «» , , .
:
<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>
Webkit-, .mp4. .ogg .ogv, Firefox, Litmus , , .
: display: none. </code> Webkit-, media query «» -: <source lang="css"> @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;} } </source> «» . 100%, «» <code><div></code>. , <code><div></code> «» , . (0px ), z- display Webkit. <code><div></code> — , . <code><div></code> <code><video></code>: <source lang="html"> <div class="overlay"> </source> CSS : <source lang="css"> @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;} } </source> Min-height 100% , , z- , . <code><div></code> . , . <source lang="css"> <div class="overlay"> <!— STANDARD EMAIL HTML / CONTENT OVER VIDEO —> <table border="0" cellpadding="0" cellspacing="0" width="600"> ... </table> </div> </source> <h4> </h4> , HTML5-. , , iOS, : <img src="https://habrastorage.org/files/be1/147/016/be114701690f48e4877a33ed99f03d74.jpg"/> - iOS, media queries , iOS- ( play): <source lang="css"> /* 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;} } </source> display none, . , z- , , <code><td></code>. , Webkit- «» . CSS: <source lang="css"> /* 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;} } </source> CSS <code><div></code>, « », , <code><video></code> , . Twitter, , , ( <a href="https://litmus.com/blog/how-to-code-html5-video-background-in-email"></a>). <h5> «»:</h5> <ul> <li><a href="http://habrahabr.ru/company/pechkin/blog/255819/">How-to: email-</a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/257915/"> </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/258313/"> media queries email-: </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/259333/"> : plain-text </a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/259909/">How-to: email-</a></li> <li><a href="http://habrahabr.ru/company/pechkin/blog/260945/"> email-</a></li> </ul>Source: https://habr.com/ru/post/261447/
All Articles