Главное Свежее Вакансии Образование
4 139 14 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

Сегодня мы поговорим о том, как с помощью HTML5 создать письмо, фоном которого служит видео.

b_55924317aeab0.jpg

Для открытия гифки нужно нажать на картинку

Бывают случаи, когда для максимизации эффекта почтовой рассылки, дизайнерам и маркетологам приходится придумывать нестандартные ходы. Команда почтового сервиса 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%">

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

mpusXR7oDCt0Ef6Q1J568cxv0Ocw6E22SO1PZOnj

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

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

Также важно было указать цвет фона и в 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, в которой на видео отображалась ненужная кнопка для его проигрывания:

UaYl0oG6FQGUL4YG5dczfxMn1B9Ms6505dkf0pJ2

Нужно было каким-то образом отключить рендеринг видео на устройствах с 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, подписчики, получившие такое письмо, высокого его оценили (подборка восторженных твитов в конце этого поста).

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

+5
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
AgriChain
AgriChain - комплексная онлайн система IT-решений для управления агробизнесом
Панченко Андрей
Ух тышка!!! Йолки зеленые, попробовали - получилось! Сегодня с сотню предложений вышлем... йошкин кот - крутой ну!
Ответить
Иван Бабкин
А толку? У 90% пользователей видео не воспроизведется же.
Ответить
AgriChain
AgriChain - комплексная онлайн система IT-решений для управления агробизнесом
Панченко Андрей
а вдруг попадем на того, у кого оно воспроизведется ? да плюс видео и тд...
Ответить
Nick 20671
Даже не 90%, а 97%, скорее всего.
Ответить
Иван Бардов
А мне пришлёте?
Куда адрес почты писать (спамботов опасаюсь)?
Ответить
Иван Бабкин
А в веб-интерфейсах (Яндекс.Почта, Mail.ru и пр.) видео будет воспроизводиться?
Ответить
Smile Bright Media
Контент-продвижение на зарубежных и российских ресурсах
Alexander Lashkov
В вебе там все сложно, довольно ограниченная штука для конкретных ситуаций и клиентов.
Ответить
Naumov Nikita
А в чем крутизна переводить статью от 22 апреля 2014 года? у них хотя бы пример живой есть

https://litmus.com/blog/how-to-code-html5-video-background-in-email - пруф
Ответить
Smile Bright Media
Контент-продвижение на зарубежных и российских ресурсах
Alexander Lashkov
Пруф какой-то непруфовый, поскольку есть ссылка на этот пост в самом начале материала. Ну и реакция народа показывает, что никто не знал ничего о видео фонов в email, несмотря на то, что сейчас июнь 2015.
Ответить
Cymbals monkey
Лишний, абсолютно ненужный интернет-трафик (привет 3g)
Нагружает систему (да, воспроизведение видео грузит систему)
Анимация отвлекает

Лучше чем plain-text письма ещё не придумали.
А за такое сразу в спам отправил бы
Ответить
Денис Глебко
таблицы!!! вы снова в деле!!!
Ответить
AdvanceTS
Простой инструмент для работы с рекламой
Марина Русакова
Ага, я тоже удивилась))
Ответить
Denny Smirnov
А когда их не было в письмах?
Ответить
tagao
Получайте посты из Вк, Twitter, Instagram в одном стандартизированном JSON
Николай Мамадаев
Интересно, я про такую возможность не знал.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.