Как сверстать фоновое HTML5-видео в email-сообщении
Для открытия гифки нужно нажать на картинку
Бывают случаи, когда для максимизации эффекта почтовой рассылки, дизайнерам и маркетологам приходится придумывать нестандартные ходы. Команда почтового сервиса Litmus в своем блоге рассказала о том, как с помощью HTML5 создать письмо, фоном которого служит видео.
Видео проигрывалось в почтовых программах Apple Mail и Outlook 2011 для Mac. В остальных почтовых клиентах отображалось обычное изображение. Ниже представлено пошаговое руководство по созданию такого видео-письма.
Данный материял является адаптированным переводом текста из блога Litmus.
Верстка для десктопа
Прежде всего, следует создать полноразмерную таблицу, которая станет контейнером для верхней части письма:
<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;" rel="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;"></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, подписчики, получившие такое письмо, высокого его оценили (подборка восторженных твитов в конце этого поста).
Читайте также другие материалы от «Печкина»:
- How-to: Правила вёрстки email-писем
- Как использовать прогрессивное улучшение для вёрстки писем
- Использование media queries в вёрстке email-писем: за и против
- Дизайн простоты: Как делать эффективные plain-text письма
- How-to: Типографика в дизайне email-писем
- Что нужно знать о работе с текстом превью email-писем