[Перевод] Как сверстать фоновое HTML5-видео в email-сообщении
Бывают случаи, когда для максимизации эффекта почтовой рассылки, дизайнерам и маркетологам приходится придумывать нестандартные ходы. Команда почтового сервиса Litmus в своем блоге рассказала о том, как с помощью HTML5 создать письмо, фоном которого служит видео.
Видео проигрывалось в почтовых программах Apple Mail и Outlook 2011 для Mac. В остальных почтовых клиентах отображалось обычное изображение. Ниже представлено пошаговое руководство по созданию такого видео-письма.
Верстка для десктопа
Прежде всего, следует создать полноразмерную таблицу, которая станет контейнером для верхней части письма:
Внутри таблицы предусмотрена ячейка, содержащая изображение для «плана Б», если видео не загрузится:
Это «запасное» изображение выглядело так:
Такая картинка была нужна по двум причинам:
- Большинство почтовых клиентов не поддерживают фоновое видео в письмах.
- Некоторые подписчики могли испытывать сложности с загрузкой видео из-за большого размера файла.
Также важно было указать цвет фона и в и в , чтобы все не сломалось в том случае, если в определенной почтовой программе отключен показ изображений (например, в Outlook) — в письме используется белый шрифт, так что если бы цвет фона был белым, а картинка не загрузилась, пользователь не увидел бы вообще ничего.
На следующем шаге видео было завернуто в в качестве первого элемента в ячейке :
Поскольку фоновые видео поддерживаются только в 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 к «обернутому» с видео позволит добиться определенной высоты, позиционирования, и избежать любых наложений контента внутри тега.
Затем внутрь этой обернутого помещается видео:
Поскольку видео поддерживается только в Webkit-клиентах, использовался формат .mp4. Можно было также добавить видео в форматах .ogg или .ogv, чтобы видеть видеофон могли и пользователи Firefox, но представители Litmus решили, что это не целевая аудитория, и не стали утяжелять письмо.
Важный момент: по умолчанию видео было скрыто с помощью опции display: none. Поскольку тег
@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%, чтобы видео занимало всю ячейку «обернутого» . Ранее были произведены настройки, заставляющие этот скрывать любой «переполняющийся» контент, так что видео не может выйти за пределы отведенной для него ячейки. Кроме того для видео была задана абсолютная позиция (0 px от верха и левой части страницы), значение z-индекса и новое значение display для показа в Webkit.
Далее был использован еще один с оверлеем — для контента, который будет отображаться поверх видео. Этот вставляется сразу после тега
А вот 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-индекс нужны, чтобы налагаемый контент отображался в верхней части видео.
Потом нужный контент помещается внутрь с оверлеем. Остальное содержимое письма реализуется с помощью стандартной табличной верстки, чтобы добиться нормального отображения в большинстве почтовых программ.
Верстка для мобильных устройств
К сожалению, ни одно популярное мобильное почтовое приложение не поддерживает фоновые 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-индекс гарантировал, что будет загружено запасное фоновое изображение, хранящееся в ячейке .
При этом, нужно было сохранить возможность показа видео в мобильных 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 изменял высоту , который является «оберткой для видео», чтобы лучше выглядели уменьшенные картинки и шрифты, а также менял расположение Судя по реакции в Twitter, подписчики, получившие такое письмо, высокого его оценили (подборка восторженных твитов в конце этого поста).
Читайте также другие материалы от «Печкина»:
