メーリングリストの効果を最大化するために、デザイナーやマーケティング担当者が非標準的な動きを考え出す必要がある場合があります。 彼のブログでLitmusメールサービスのチームは、HTML5を使用してメールを作成する方法について話しました。その背景はビデオです。
ビデオは、Apple MailおよびOutlook 2011 for Macで再生されました。 残りの電子メールクライアントは、通常の画像を表示しました。 以下は、そのようなビデオメールを作成する方法に関する段階的なガイドです。
デスクトップレイアウト
まず、フルサイズのテーブルを作成する必要があります。これは、レターの上部のコンテナーになります。
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#f2ae44" width="100%">
テーブル内には、ビデオがロードされない場合の「プランB」の画像を含むセルが提供されます。
<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%">
この「バックアップ」イメージは次のようになりました。
この写真は、次の2つの理由で必要でした。
- ほとんどのメールクライアントは、メールのバックグラウンドビデオをサポートしていません。
- 一部の加入者は、ファイルサイズが大きいため、ビデオのダウンロードが困難な場合があります。
また、背景色を示すことも重要でした
, , (, 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>