Мы знали, что не можем продвигать Litmus Live 2014 (ранее The Email Design Conference) обычным электронным письмом, поэтому стремились создать что-то прогрессивное и по-настоящему впечатляющее. Естественно, мы хотели, чтобы оно было настолько потрясающим, что люди не могли не посетить конференцию, чтобы узнать о трюках, которые мы использовали, в частности: как закодировать фоновое видео HTML5 в электронном письме.
Да, вы не ослышались: **фоновое видео в электронном письме**.
Кроме того, вы можете ознакомиться с результатами тестирования Litmus финальной версии письма, отправленного подписчикам (обратите внимание, что некоторые скриншоты могут выглядеть «криво» из-за анимации видео). Фоновое видео работало в следующих клиентах:
— Apple Mail
— Outlook 2011 (Mac)
Как видите, HTML5-видео корректно отображается во всех клиентах с использованием резервного изображения.
Мы ожидали, что письмо привлечёт внимание, но реакция, которую мы получили, превзошла все ожидания. Мы с гордостью сообщаем, что оно вызвало сотни твитов — комментарии, вопросы и похвалы. Столь ошеломительный отклик заставил нас ускорить публикацию этой статьи с разбором методологии и процесса создания письма. Вот пошаговое руководство по реализации этого адаптивного письма.
## Дизайн для десктопа
Сначала мы создали таблицу на всю ширину в качестве контейнера для верхней части письма:
`
`
Внутри этой таблицы мы создали ячейку с «резервным» фоновым изображением, которое выступало в роли статичной картинки, если видео не загружалось:
`
`
Резервное фоновое изображение выглядело так:
Создание резервного фонового изображения было необходимо по двум причинам:
— Большинство почтовых клиентов не поддерживают фоновые видео.
— У некоторых подписчиков могут возникнуть проблемы с загрузкой фонового видео из-за большого размера файла.
Также важно было добавить цвет фона как для тега `
`, так и для `
`, чтобы обеспечить резервный вариант при отключённых изображениях. Этот шаг был критически важен для подписчиков, использующих Outlook, AOL Mail и другие почтовые клиенты, которые по умолчанию блокируют изображения. Особенно это касалось нашего письма, так как в дизайне используется белый текст в видео-секции — мы хотели избежать ситуации, когда белый текст отображается на белом фоне.
Далее мы использовали обёртку `
` для видео как первый элемент в `
`:
`
`
Поскольку фоновые видео поддерживаются только в клиентах на базе Webkit (Apple Mail и Outlook 2011 для Mac), мы использовали медиа-запрос, специфичный для Webkit, чтобы применить 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-wrap», задаёт фиксированную высоту, относительное позиционирование, убирает переполнение контента и обнуляет отступы и поля.
Затем мы поместили `
` с классом «video-wrap»:
«`
«`
Мы использовали версию видео в формате .mp4, так как фоновое видео поддерживается только в Webkit-клиентах. Мы могли бы добавить файл .ogg или .ogv для подписчиков, открывающих веб-версию в Firefox, но посчитали, что дополнительная нагрузка не нужна для нашей аудитории.
Также важно отметить, что мы скрыли `
«`
@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;}
}
«`
Ещё раз подчеркнём, что этот CSS применялся только для Webkit. Мы задали минимальную высоту и ширину в 100%, чтобы видео масштабировалось на всю ширину `
` с классом «video-wrap». Поскольку ранее мы определили, что `
` с классом «video-wrap» скрывает переполняющий контент, видео не отображалось за пределами заданных размеров этого `
`. Видео также получило абсолютное позиционирование (с отступом 0px от верхнего и левого края страницы), значение z-index и новое значение display для отображения в Webkit.
Наконец, мы использовали накладывающийся `
` для контента, который должен отображаться поверх видео, разместив его сразу после тега `