Faux Video: имитация видео в email-рассылках

Многие email-маркетологи хотят добавлять видео в свои рассылки, но сталкиваются с тем, что большинство почтовых клиентов его не поддерживают.

На помощь приходит «faux video» (псевдовидео).

## Что такое faux video?

Faux video имитирует движение видео с помощью интерактивного элемента, позволяя подписчикам почувствовать, что они запускают видео прямо в письме. Существует множество техник для имитации встроенного видео в email.

В этой статье мы расскажем о методе, который используем в Litmus. Он основан на анимированных GIF-изображениях и имеет одно большое преимущество: он работает даже в Gmail!

## Зачем использовать faux video?

Хотя видео в email — популярная тема, оно работает только в Apple Mail и iOS Mail — единственных почтовых клиентах с полной поддержкой HTML5-видео. Используя технику faux video, вы можете имитировать реальное видео в письме с поддержкой гораздо большего количества почтовых клиентов.

Техника faux video поддерживается в:

— Gmail

— Приложении Gmail

— Apple Mail

— iOS Mail для iPhone и iPad

— Samsung Mail

— Outlook для Mac

Если вы хотите добавить «живое» движение в свои кампании, использование faux video позволит увидеть ваш контент большему числу подписчиков, чем при использовании HTML5-видео.

## Как создать faux video с помощью наложения изображений

Чтобы использовать эту технику в следующей кампании, вам понадобятся два изображения одинакового размера: статичная обложка и анимированный GIF, наложенные друг на друга.

**Использование статичной обложки**

В нашем примере статичное изображение называется cover-play.jpg. Оно отображается по умолчанию, но исчезает при взаимодействии, открывая GIF на фоне. В нашем примере на обложке есть иконка кнопки «Play», но вы можете использовать любую графику или текст — только не забудьте про ALT-текст!

**Использование анимированного GIF в качестве фона**

Вам понадобится анимированный GIF — в нашем примере это fauxvideo.gif. Он будет открываться при наведении курсора на статичную обложку. Этот файл добавляется в код как обычное фоновое изображение.

## Настройка CSS/HTML для faux video

Давайте разберем, как настроить код для вашей рассылки:

### Встроенный CSS для faux video

Этот код размещается между тегами **** в начале вашего письма.

«`

.showvideo:hover{

opacity: 0 !important;

transition: 0.3s !important;

}

.showvideo { transition: 0.3s !important; }

«`

Стиль **:hover** изменяет прозрачность обложки на 0, скрывая её и открывая GIF на фоне. Переход в 0.3 секунды добавляет плавность там, где это поддерживается.

### HTML-код для faux video

Вам понадобятся две части кода: ячейка **

** и изображение ****.

Код для ячейки **

**, загружающий GIF как фоновое изображение:

«`

«`

Код для изображения **cover-play.jpg**, которое скрывается при **:hover**:

«`

«`

## Часто задаваемые вопросы

### Адаптивно ли это для мобильных устройств?

Безусловно! На десктопе GIF срабатывает при наведении, а на мобильных устройствах для этого требуется касание или долгое нажатие.

### Можно ли использовать Retina-изображения?

Да, но будьте осторожны: слишком тяжелые файлы негативно скажутся на скорости загрузки письма.

### Почему используется opacity, а не другие методы?

Методы вроде **display:none** или **visibility:hidden** вызывают мерцание изображения. Использование прозрачности (opacity) обеспечивает наиболее плавный пользовательский опыт, хотя стоит учитывать, что этот метод не поддерживается в AOL, Yahoo и Outlook.com.