Имитация видео: Альтернатива для использования видео в email

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

На сцену выходит faux video (искусственное видео).

## Что такое 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 с помощью наложенных изображений

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

**Использование статичного изображения обложки для faux video**

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

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

Затем вам понадобится фоновое анимированное GIF-изображение — в нашем случае оно называется **fauxvideo.gif**. Это изображение, которое будет появляться, когда подписчик наведет курсор на статичную обложку. В коде оно будет размещено как обычное фоновое изображение.

## Как настроить CSS/HTML для faux video

Давайте разберем, как использовать HTML и CSS для настройки faux video в вашей следующей email-кампании:

### Использование встроенного CSS для faux video

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

«`

.showvideo:hover{

opacity: 0 !important;

transition: 0.3s !important;

}

.showvideo { transition: 0.3s !important; }

«`

Стиль **:hover** в этом коде изменяет обложку на **opacity: 0** — фактически скрывая изображение — когда подписчик наводит курсор на этот раздел, открывая анимированный GIF на заднем плане. Переход в 0,3 секунды является косметическим дополнением, добавляющим постепенное затухание при наведении в тех почтовых клиентах, которые это поддерживают. Он добавлен как к классу при наведении, так и к классу без наведения, чтобы обеспечить плавный переход, когда подписчик наводит курсор на изображение и убирает его. (Примечание: вам не нужно настраивать VML-фоллбэк для Outlook, поскольку Outlook не поддерживает hover.)

### Использование HTML для faux video

Вам нужно будет включить две части кода в ваш HTML: ячейку **

** и ячейку ****.

Это код для контейнерной ячейки **

**, которая загружает анимированный GIF в качестве фонового изображения, даже когда обложка находится сверху и взаимодействие не активно.

«`

«`

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

«`

«`

Теперь просто соберите все это вместе! Вы можете увидеть полный пример кода faux video в действии в этом CodePen.

## Частые вопросы о faux video

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

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

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

Да! В этом примере мы не использовали Retina-изображения, но вы определенно можете использовать их с faux video, если это целесообразно для общего времени загрузки вашего письма. Будьте осторожны с использованием слишком больших изображений или GIF-анимаций, которые могут негативно повлиять на время загрузки письма. Обязательно ознакомьтесь с нашей статьей о Retina-изображениях.

### Зачем использовать opacity вместо других методов скрытия?

Использование **display:none** для элемента при наведении удаляет его из потока документа, и в итоге вы получаете эффект, при котором изображения постоянно исчезают и появляются при наведении, что не раскрывает анимированный GIF и не обеспечивает плавного перехода:

Использование **visibility:hidden** приведет к аналогичному эффекту мерцания:

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

— AOL

— Yahoo

— Outlook.com

*Эта статья была изначально опубликована 5 мая 2016 года и обновлена 31 августа 2022 года.*