В конструкторе писем доступно два метода добавления видео в шаблон:
- вставить URL-ссылку на видео;
- встроить видео.
Метод 1. URL-ссылка на видео
Указанный метод идеально работает во всех почтовиках и на всех устройствах.
Для вставки URL-ссылки на видео необходимо:
- создать структуру с 1 колонкой;
- добавить блок «Видео»;
- кликнуть левой кнопкой мыши по контейнеру в шаблоне;
- вставить ссылку на видео в YouTube, Vimeo или VK;
Примечание
Ссылка должна быть прямая, без дополнительных параметров (привязки к профилю и др.). Например:
https://youtu.be/p1NT44lI_Es?si=OWOCshEX1LCEiK6u.
- выбрать цвет для кнопки воспроизведения – белый, красный или черный.
Миниатюра/изображение превью видео подставляется автоматически, но вы также можете установить его самостоятельно.
Метод 2. Встроить видео
Встроенное видео воспроизводится непосредственно в письмах. Получателям не нужно переходить на другой сайт для просмотра.
Важно!
Воспроизведение доступно не во всех почтовиках. Фактически этот тип контента поддерживают только Apple Mail, нативная почта iOS, Thunderbird и Outlook для Mac.
Встраиваемое видео добавляется при помощи HTML.
Для того чтобы встроить этот код в шаблон письма, необходимо создать структуру с 1 колонкой и добавить в нее блок типа HTML.
Далее кликните левой кнопкой мыши по «Вставьте свой HTML в редактор кода» в шаблоне, чтобы открыть редактор кода. Добавьте сам код:
<video class="adapt-img" controls="controls" poster="https://tlr.stripocdn.email/content/guids/CABINET_0bd21bea47f1cfb916fb84d59a107495/images/92621531318217276.jpg" width="100%" height="313">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm">
<!-- fallback -->
<a href="https://www.youtube.com/watch?v=ryqOEPk51Lg/" class="esd-frame-element esd-hover-element esdev-disable-select"><img class="adapt-img" src="https://tlr.stripocdn.email/content/guids/CABINET_0bd21bea47f1cfb916fb84d59a107495/images/48461531318273724.jpg" alt="" width="100%" height="313"></a>
</video>Часть кода до слова «fallback» предназначена для тех получателей, чьи устройства и почтовики поддерживают эту интерактивность. Тогда как часть ниже — для тех, чьи клиенты не поддерживают ее. Они будут перенаправлены на YouTube, Vimeo или другой видеохостинг.
Используя этот код вы можете быть уверены, что все пользователи увидят видео, которым вы хотите поделиться.
Настройка кода встраивания
- Загрузите изображение, которое собираетесь использовать для видео, на любой сайт – оно будет использоваться как превью для пользователей с устройствами Apple.
Видео MP4 генерирует свое собственное уменьшенное изображение, но оно не отображается на iPhone X и устройствах с дисплеями Retina. Кнопка воспроизведения появится на нем автоматически. Вставьте эту ссылку после атрибута «Poster».
- Конвертируйте видео в формат MP4, используя любой видеохостинг. В коде замените ссылку после атрибута «source src» на ваш URL.
- Конвертируйте видео MP4 в формат WebM и вставьте ссылку в соответствующую строку кода. Это видео будет воспроизводиться на тех устройствах, которые поддерживают данный формат.
- Загрузите второе изображение, которое собираетесь использовать для превью. Добавьте поверх него изображение кнопки «воспроизведения». На самом деле это может быть скриншот видео на Youtube – он будет отображаться во всех почтовиках, которые еще не поддерживают интерактивность.
- Загрузите видео на Youtube (Vimeo, свой сайт и т.д.) и вставьте URL в атрибут «href» после кавычек вместо существующей ссылки. Как только получатель нажмет кнопку «воспроизведения», он будет перенаправлен на соответствующий сайт.