Для начала, Вы можете ознакомиться с нашим видеороликом о том, как можно встроить видео в письмо с помощью Stripo.

Наш редактор предоставляет возможность добавлять видео в шаблон/письмо двумя способами.

  1. Вставить URL ссылку на видео.

  2. Встроить HTML5 видео непосредственно в письмо.

Способ 1. Вставка URL ссылки на видео

Это самый безопасный способ доставки видео, поскольку он отлично работает во всех почтовых клиентах и на всех устройствах.

И так, как же вставить URL ссылку на Ваше видео:

  • перетащите структуру с одним контейнером в письмо;

  • затем перетащите базовый блок «Видео»;

  • щелкните левой кнопкой мыши по блоку;

  • в панели настроек Вам нужно будет только вставить ссылку на видео из Youtube или Vimeo;

  • наша система автоматически заполнит поле «Альтернативный текст»;

  • выберите цвет «кнопки Play» - она может быть белым, традиционным красным или черным.

Наша система автоматически создает эскиз для предварительного просмотра Ваших видео. Но Вы также можете установить собственное изображение, если хотите.

Как установить собственное изображение к видео в письмах:

  • переключите контрол «Собственное изображение» на панели настроек;

  • загрузите свое изображение;

  • отредактируйте его, если необходимо.

Также, Вы можете даже вставить анимированную GIF картинку в качестве эскиза изображения, если хотите. Это, безусловно, привлечет еще больше внимания к видео.

Важно отметить:

Кнопка воспроизведения также будет отображаться поверх пользовательского изображения.

Таким образом, необходимо будет выбрать вариант «нет», если ваше GIF изображение уже содержит изображение кнопки.

Также, при использовании контрола «Собственное изображение» Вы можете добавлять ссылку на видео, не относящуюся к YouTube, Vimeo или вконтакте. При этом, ссылка должна содержать прямой путь к видео (без относительных путей) и быть доступной для просмотра всем пользователям.

Способ 2. Встраивание HTML5 видео

Встроенное видео - это видео, которое воспроизводится прямо в письме. Получатели не обязаны переходить на другой сайт, чтобы посмотреть его.

И да, оно не может быть воспроизведено во всех почтовых клиентах. Фактически, только следующие почтовые клиенты поддерживают HTML5: Outlook 2011 и 2013 для Mac OS и Apple Mail (при просмотре на MacBook и iPhone 7, 8, X. Предыдущие версии не поддерживают HTML5).

Stripo предоставляет своим пользователям универсальный код - с помощью которого Вы можете предоставить своим пользователям видео, которым хотите поделиться. (Пожалуйста, найдите его ниже)

Мы рекомендуем придерживаться следующего порядка:

  1. Вставить этот код в свое письмо.

  2. Настроить данный код, вставив свои ссылки URL.

И так, как же вставить этот код в письмо с помощью Stripo:

  • перетащите структуру с одним контейнером в свое письмо;

  • перетащите блок HTML;

  • кликните левой кнопкой мыши на текст «Вставьте свой 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», предназначена для тех получателей, чьи устройства и почтовые клиенты поддерживают этот вид интерактивности.

А нижняя часть после «fallback» предназначена для тех, чьи почтовые клиенты не поддерживают интерактивность, они будут перенаправлены на Youtube, Vimeo или любой другой видеохостинг.

Используя этот код, Вы можете быть уверенными, что Ваши пользователи увидят видео, которым Вы хотите поделиться.

Настройка кода для встраивания:

  • загрузите изображение, которое Вы собираетесь использовать в качестве миниатюры, на любой сайт (для этих целей я использую Pinterest) - он будет использоваться в качестве предварительного изображения для тех клиентов, которые используют устройства Apple. Конечно, видео MP4 будет генерировать свое собственное уменьшенное изображение, но это изображение не будет отображаться на iPhone X и устройствах с дисплеями Retina. Кнопка воспроизведения автоматически появится на нем;

  • затем, конвертируйте видео в формат MP4, используя любой видеохостинг. В коде замените ссылку, которая идет после атрибута «source src», на ваш URL;

  • конвертируйте видео MP4 в формат WebM - и вставьте ссылку в соответствующую строку в коде. Это видео будет воспроизводиться на тех устройствах, которые поддерживают этот формат;

  • загрузите второе изображение, которое Вы собираетесь использовать в качестве эскиза. Добавьте на изображение кнопку «play». На самом деле это может быть скриншот вашего видео на Youtube - он будет отображаться во всех почтовых клиентах, которые еще не поддерживают интерактивность в электронных письмах;

  • затем загрузите свое видео на Youtube (Vimeo, ваш веб-сайт и т.д.) - вставьте этот URL в атрибут «href» после кавычек вместо существующей ссылки. Как только получатель нажмет кнопку «воспроизвести», он или она будет перенаправлен на соответствующий веб-сайт.

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

Дополнительную информацию о том, как работать с видео, можно найти в нашем блоге «Как добавить видео в электронную почту с помощью Stripo».

Вы нашли ответ?