Как сверстать фоновое HTML5-видео в email-сообщении

Бывают случаи, когда для максимизации эффекта почтовой рассылки, дизайнерам и маркетологам приходится придумывать нестандартные ходы. Команда почтового сервиса Litmus в своем блоге рассказала о том, как с помощью HTML5 создать письмо, фоном которого служит видео.

Видео проигрывалось в почтовых программах Apple Mail и Outlook 2011 для Mac. В остальных почтовых клиентах отображалось обычное изображение. Ниже представлено пошаговое руководство по созданию такого видео-письма.

Верстка для десктопа

Прежде всего, следует создать полноразмерную таблицу, которая станет контейнером для верхней части письма:

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#f2ae44" width="100%">

Внутри таблицы предусмотрена ячейка, содержащая изображение для «плана Б», если видео не загрузится:

<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%">

Это «запасное» изображение выглядело так:

Такая картинка была нужна по двум причинам:

Большинство почтовых клиентов не поддерживают фоновое видео в письмах.
Некоторые подписчики могли испытывать сложности с загрузкой видео из-за большого размера файла.

Также важно было указать цвет фона и в <table> и в <td>, чтобы все не сломалось в том случае, если в определенной почтовой программе отключен показ изображений (например, в Outlook) — в письме используется белый шрифт, так что если бы цвет фона был белым, а картинка не загрузилась, пользователь не увидел бы вообще ничего.

На следующем шаге видео было завернуто в <div> в качестве первого элемента в ячейке <td>:

<div class="video-wrap">

Поскольку фоновые видео поддерживаются только в Webkit-based почтовых клиентах (Apple Mail, Outlook 2011 для Mac), то была использована заточенная под этот движок media query для применения CSS к <div> в случае обнаружения 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 к «обернутому» <div> с видео позволит добиться определенной высоты, позиционирования, и избежать любых наложений контента внутри тега.

Затем внутрь этой обернутого <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>

Поскольку видео поддерживается только в Webkit-клиентах, использовался формат .mp4. Можно было также добавить видео в форматах .ogg или .ogv, чтобы видеть видеофон могли и пользователи Firefox, но представители Litmus решили, что это не целевая аудитория, и не стали утяжелять письмо.

Важный момент: по умолчанию видео было скрыто с помощью опции display: none. Поскольку тег <video> работает только в Webkit-клиентах, с помощью специальной media query для таких почтовых программ переписывались «дефолтные» инлайн-стили:

@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;} }

Таким образом производилось «нацеливание» только на подобные почтовые клиенты. Минимальная ширина и высота были установлены в 100%, чтобы видео занимало всю ячейку «обернутого» <div>. Ранее были произведены настройки, заставляющие этот <div> скрывать любой «переполняющийся» контент, так что видео не может выйти за пределы отведенной для него ячейки. Кроме того для видео была задана абсолютная позиция (0px от верха и левой части страницы), значение z-индекса и новое значение display для показа в Webkit.

Далее был использован еще один <div> с оверлеем — для контента, который будет отображаться поверх видео. Этот <div> вставляется сразу после тега <video>:

<div class="overlay">

А вот 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;} }

Min-height в 100% использован, чтобы заполнить всю ширину зоны контента, а относительная позиция и более высокий z-индекс нужны, чтобы налагаемый контент отображался в верхней части видео.

Потом нужный контент помещается внутрь <div> с оверлеем. Остальное содержимое письма реализуется с помощью стандартной табличной верстки, чтобы добиться нормального отображения в большинстве почтовых программ.

<div class="overlay"> <!— STANDARD EMAIL HTML / CONTENT OVER VIDEO —> <table border="0" cellpadding="0" cellspacing="0" width="600"> ... </table> </div>

Верстка для мобильных устройств

К сожалению, ни одно популярное мобильное почтовое приложение не поддерживает фоновые HTML5-видео. Большинство пользователей, относящихся к целевой аудитории в данном случае, использовали iOS, в которой на видео отображалась ненужная кнопка для его проигрывания:

Нужно было каким-то образом отключить рендеринг видео на устройствах с iOS, для чего пришлось использовать media queries для конкретных параметров ширины экрана и соотношений пикселей различных устройств, чтобы отключить видео для iOS-клиентов (что привело бы и к отсутствию ненужной кнопки play):

/* 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;} }

Свойство display для всех этих устройство было установлено в none, так что видео не показывалось. Кроме того, более низкий z-индекс гарантировал, что будет загружено запасное фоновое изображение, хранящееся в ячейке <td>.

При этом, нужно было сохранить возможность показа видео в мобильных Webkit-браузерах и продемонстрировать «отзывчивость» на десктопе. Поэтому был использован еще и такой 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;} }

Мобильный CSS изменял высоту <div>, который является «оберткой для видео», чтобы лучше выглядели уменьшенные картинки и шрифты, а также менял расположение <video> для лучшего выравнивания, поскольку его размеры не менялись.

Судя по реакции в Twitter, подписчики, получившие такое письмо, высокого его оценили (подборка восторженных твитов в конце этого поста).

Как сверстать фоновое HTML5-видео в email-сообщении

Верстка для десктопа

Верстка для мобильных устройств

Читайте также другие материалы от «Печкина»:

Комментарии

Добавить комментарий Отменить ответ