Вставка видео в html с ютуба: Sorry, this page can’t be found.

HTML первые шаги — урок 7 — Тег object. Вставка видео с Youtube.

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

Получился вот такой код:

<object>
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always">
</object>

Как вы наверно уже заметили для вставки видео используется тег <object>. Также у тега object есть атрибут style. Атрибут style это универсальный для всех тегов атрибут в нем пишутся CSS-стили для тега. Что такое CSS мы разберем чуть позже, а пока хватит нам и этого. CSS стили в атрибуте пишутся через точку с запятой. Здесь у нас есть height и width, то есть высота и ширина. Именно эти параметры мы можем поменять. Например если мы поставим:

<object>
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always">
</object>

То размер проигрывателя Youtube будет в два раза меньше. Также тогда следует изменить высоту и ширину у тега embed, которые заданы атрибутами width и height.

<object>
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always">
</object>

Также в теге object включены теги <param>. В тегах param прописываются свойства вставленного объекта. Среди вставленных параметров:

movie — обозначает, что это видео-ролик, а далее в атрибуте value URL этого ролика.

allowFullScreen — разрешить переход в полноэкранный режим, можно поставить value=»false», чтобы нельзя было переходить в полноэкранный режим.

allowScriptAccess — нужно для работы с API проигрывателя.

Учебник HTML 5. Статья «Размещение видео с видео хостинга YouTube»

Тяжело представить себе современный интернет без самого популярного видео хостинга YouTube, который по данным сайта alexa.com на конец 2016 года явлется вторым сайтом в мире по количеству посетителей! Речь в этой статье пойдет о том как с использованием языка HTML добавить видео контент c этого знаменитого видео хостинга на Ваши страницы.

Встраивание проигрывателя во фрейм

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

• Если вы хотите использовать на сайте ваше видео, то необходимо его предварительно загрузить на YouTube, для этого необходимо иметь аккаунт Google и провести минимальные настройки своего канала (будем считать что этот шаг Вами пройден).
• Запишите ID видео (последние символы в адресной строке ?v=VIDEO_ID).
• Определите размеры <iframe> элемента на вашей веб-странице (атрибуты width и height). Хочу сразу подчеркнуть, что встраивать проигрыватель с помощью элемента <iframe> является лучшей практикой, таким образом вы предоставите пользователю оптимальные условия просмотра вне зависимости от типа его устройства или формата воспроизводимого файла). Если вы пропустили тему, посвященную фреймам в HTML, то рекомендую Вам к ней вернуться для изучения.

---

Примечание из официальной документации: Окно просмотра встроенного проигрывателя должно быть не меньше 200 x 200 пикселей. Если в проигрывателе отображаются элементы управления, окно должно быть достаточно большим, чтобы полностью отобразить элементы управления, не сжимая окно просмотра меньше минимального размера. Минимальный размер окна просмотра для проигрывателей формата 16:9 составляет 480 х 270 пикселей.

---

• Добавьте путь к видео, используя атрибут src и записанный ранее ID необходимого видео (https://www.youtube.com/embed/VIDEO_ID). Справочно: Раньше региональные блокировки видео можно было обходить тем, что вместо /embed/ можно было указать /v/.

Давайте рассмотрим пример добавления видео с YouTube:

<!DOCTYPE html>
<html>
	<head>
		<title>Размещение видео с YouTube</title>
	</head>
	<body>
		<p>Размещение видео с YouTube</p>
		<iframe  width = "320" height = "240" src = "https://www.youtube.com/embed/
 d9TpRfDdyU0?autoplay=1?loop=1&start=28&color=white">
		</iframe>
	</body>
</html>

В этом примере элементом <iframe> мы разместили фрейм на странице и задали для него ширину 320 пикселей (атрибут width) и высоту 240 пикселей (height). В атрибуте src мы указали путь к странице с видео, указали ID видео (выделен курсивом) и добавили дополнительные параметры плеера YouTube (подробное описание доступно в официальной документации):

• autoplay = «1» (видео автоматически запускается).
• loop = «1» (проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле).
• start = «28» (определяет с какой секунды начнется воспроизведение видео, значение должно быть положительным целым числом).
• color = «white» (бегунок просмотренного отмеряет белым цветом, по умолчанию — красным).

Результат нашего примера:

Есть еще один способ, который позволяет формировать HTML код для размещения плеера YouTube с интересующим нас видео. Для этого необходимо найти на YouTube это видео, пролистать под описание к видео, найти и нажать на кнопку «Поделиться». После этого нам будет доступно меню в котором необходимо выбрать вкладку «HTML-код». У нас есть два варианта: сразу скопировать готовый код сформированный по умолчанию, либо нажать на вкладку

Рис. 53 Настройка фрейма на сайте YouTube.

В расширенных настройках, к примеру, можно включить режим повышенной конфиденциальности, который указывает, что YouTube должен сохранять информацию о посетителях вашей веб-страницы, только если они посмотрят ролик.

Обратите внимание, что YouTube добавляет такие атрибуты как frameboarder, который отвечает за наличие, либо отсутствие рамки вокруг фрейма и атрибут allowfullscreen, который позволяет перевести плеер в полноэкранный режим. Обращаю ваше внимание, что этих атрибутов нет в спецификации HTML 5, не смотря на это атрибут frameboarder убирает границы фрейма, но при валидации документа быдет указана ошибка. В HTML 5 рекомендуется границы элемента добавлять, либо убирать средствами CSS, подробно об этом мы изучим в учебнике CSS в статье «Границы элемента в CSS».

Встраивание проигрывателя на страницу

Давайте рассмотрим следующий способ добавления видео с YouTube на страницы, но в этот раз мы будум добавлять видео не во фрейм, а на саму страницу. Для этого нам необходимо использовать HTML тег <object> или <embed>.

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

Внутри элемента <object> также можно поместить резервный контент, который отображается, если не поддерживается мультимедийный файл. Атрибуты и параметры меняются в зависимости от типа объекта и иногда уникальны для сторонних плагинов, отображающих мультимедийный контент.

Элемент <embed> определяет контейнер для внешнего приложения, мультимедийного файла или интерактивного контента (плагин). Предполагается, что содержимое элемента не может быть распознано браузером и требуют подключения внешних плагинов или специальных программ.

Он не входил в стандарт HTML 4, но поддерживался браузерами, официальный статус он обрёл лишь в спецификации HTML 5. Спецификация HTML 4.0 рекомендовала использовать тег <object> для загрузки внешних файлов, поэтому веб-мастера помещали тег <embed> внутрь тега элемент <object>, который применялся в качестве запасного варианта в элементе <object>, чтобы обеспечить поддержку более широкого круга браузеров и обеспечить валидность документа. В HTML 5 такой необходимоcти нет (элемент проходит валидацию).

Давайте рассмотрим пример их использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тегов <object> и <embed></title>
	</head>
	<body>
		<p>Размещение видео с YouTube</p>
		<!--внедряем в страницу видео с использованием парного тега <object>-->
		<object width = "320" height = "240" data = "https://www.youtube.com/embed/d9TpRfDdyU0">
		</object>
		<!--внедряем в страницу видео с использованием тега <embed>-->
		<embed  width = "320" height = "240" src = "https://www.youtube.com/embed/d9TpRfDdyU0">
	</body>
</html>

В этом примере мы разместили видео с видео хостинга YouTube с использованием тега <object> и <embed>. Ширину и высоту видео задали с использовнием атрибутов width и height. Обратите внимание, что тег <object> парный и путь к видео необходимо указывать атрибутом data, a тег <embed> имеет синтаксис схожий с размещением обычного изображения (тег <img>) — использует атрибут src и не требует закрывающего тега.

Результат нашего примера:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:


• Используя полученные знания составьте следующую страницу:

Практическое задание № 27.

Подсказки:

1. Чтобы получить значение цвета, который использует YouTube вы можете сделать PrintScreen экрана и в графическом редакторе, используя инструмент палитра (пипетка) получить значения цвета. Например, в Paint можно получить значение цвета в системе RGB. Как задавать цвета в системе RGB вы можете повторить в статье учебника «HTML Цвета». Кроме того, для этих целей существует множество плагинов для браузера.
2. Укажите для боковой панели значение ширины равной 50% это позволит Вам получить два одинаковых блока с видео клипами и сделать наш пример адаптивным.
3. Для выполнения задания Вам потребуются знания из статьи учебника «Теги разметки страницы».

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

Как я могу вставить видео с YouTube на вики-страницы GitHub?

Расширение на @MGA Ответ «S

Хотя встроить видео в Markdown невозможно, вы можете «подделать его», включив в файл разметки действительное связанное изображение, используя этот формат:

[![IMAGE ALT TEXT](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")

Объяснение уценки

Если этот фрагмент кода выглядит сложным, разбейте его на две части:

изображение,
![image alt text](https://example.com/link-to-image)
завернутое в ссылку
[link text](https://example.com/my-link "link title")

Мы получаем миниатюрное изображение непосредственно с YouTube и связываемся с реальным видео, поэтому, когда человек нажимает на изображение / миниатюру, они попадают в видео.

Код:

[![Everything Is AWESOME](https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")

ИЛИ Если вы хотите дать читателям визуальную подсказку о том, что изображение / миниатюра на самом деле является воспроизводимым видео, сделайте собственный скриншот видео на YouTube и используйте его вместо этого в качестве миниатюры.

Код:

[![Everything Is AWESOME](http://i.imgur.com/Ot5DWAW.png)](https://youtu.be/StTqXEQ2l-Y?t=35s "Everything Is AWESOME")

Хотя для этого требуется пара дополнительных шагов ( а ) сделать снимок экрана с видео и ( б ) загрузить его, чтобы вы могли использовать изображение в качестве эскиза, оно имеет 3 явных преимущества :

1. Человек, читающий вашу уценку (или получающуюся HTML-страницу), имеет визуальную подсказку о том, что он может смотреть видео ( элементы управления видео поощряют нажатие )
2. Вы можете выбрать определенный кадр в видео для использования в качестве эскиза (что делает ваш контент более привлекательным )
3. Вы можете указать в видео определенное время, с которого начнется воспроизведение при нажатии на ссылку . (в нашем случае от 35 секунд)

Снятие и загрузка скриншота занимает несколько секунд, но имеет большую отдачу.

Так как это стандартная уценка, она работает везде. попробуйте это на GitHub, Reddit, Ghost и здесь на переполнении стека.

Этот подход также работает с видео Vimeo

пример

Код

[![Little red riding hood](http://i.imgur.com/7YTMFQp.png)](https://vimeo.com/3514904 "Little red riding hood - Click to Watch!")

Вставить видео YouTube, RuTube в HTML код страницы. Инструмент привлечения рефералов

По каждому серверу отдельно:

Заходим на Youtube.com, выбираем понравившейся видео сюжет (можно воспользоваться поиском) и шагаем по пунктам на картинке и описанию ниже:

<iframe src=»http://www.youtube.com/embed/x2O3Gin-uRs»
frameborder=»0″ allowfullscreen>
</iframe>

— Если YouTube предоставил Вам ссылку вида:

http://www.youtube.com/watch?v=AiLaifc0dCg

Теперь будем размещать видео от RuTube на страницах сайта.
Здесь все гораздо проще:
— Заходим на RuTube.ru, выбираем видео;
— Нажимаем ссылку (кнопку) «Ссылка и код«;
— Открывается окно, копируем код из пункта «Код плеера«, который имеет примерно такой вид:

<OBJECT><PARAM name=»movie» value=»http://video.rutube.ru/c556fc0d40c2ef1ec8724a538a241903″></PARAM><PARAM
name=»wmode» value=»window»></PARAM><PARAM name=»allowFullScreen» value=»true»></PARAM><EMBED
src=»http://video.rutube.ru/c556fc0d40c2ef1ec8724a538a241903″ type=»application/x-shockwave-flash»
wmode=»window» allowFullScreen=»true» ></EMBED></OBJECT>

Чтобы вставить видео с других похожих серверов в HTML код страницы, порядок действий примерно такой же простой.

Как же вставить видео с youtube на сайт joomla – шаблон и плагин

Видеоролики помогают оживить веб-страницу и предоставить читателям больше информации.

Давайте выясним, как вставить видео с Youtube на сайт Joomla пятью основными методами:

1. Используя плагин AllVideos
2. С помощью средств HTML5
3. С помощью модуля Vidbox
4. С помощью плагина Youtube Playlist Wall
5. Используя компонент Youtube Gallery

→ Удобный и функциональный плагин для вставки видео с Youtube на Joomla – AllVideos.

Он значительно упрощает этот процесс. Плагин поддерживает работу со многими видеохостингами, что позволяет не перегружать ваш сервер.

Для начала его нужно скачать и установить. Свежие релизы берите с официального сайта www.joomlaworks.net. После установки нужно выполнить настройку плагина.

Чтобы настроить плагин AllVideos, выполните следующие действия:

1. В панели управления сайтом войдите в меню Расширения-Менеджер плагинов.
2. Найдите в списке AllVideos и кликните по нему, чтобы войти.
3. Измените состояние плагина на Включено, нажав соответствующую кнопку.

→ Теперь можно приступить к настройке параметров видео.

Что здесь можно задать ???  ↓

• Select template – выбор шаблона для внешнего вида плеера
• Local Video Folder – в этой строке задайте папку для хранения видеофайлов
• Default width (in px) for videos и Default height (in px) for videos – соответственно ширина и высота видеоплеера в пикселях
• Задайте прозрачность и цвет фона плеера (video player transparency и background color)
• Display JW Player controls – параметр позволяет задать вывод кнопок управления на JW Player

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

Когда плагин настроен и включен, вы можете вставить видеоролики с помощью шаблона Joomla для вставки видео с Youtube.

Он выглядит так: ↓

{youtube} {/youtube}

Между тэгами нужно вставить URL видео с Ютуба. Вы можете скопировать его из адресной строки браузера.

Теперь вы знаете, как с помощью AllVideos добавить на Joomla видео с Youtube.

→ В HTML5 видео на веб-страницы добавляется с помощью всего одного тэга. При этом за воспроизведение отвечает браузер. Никаких дополнительных программ и плагинов устанавливать не требуется.

Этот способ кажется привлекательным, однако если вы пользуетесь средствами HTML5, учитывайте один нюанс  — Не все браузеры корректно воспроизводят файлы разных типов !!!

Некоторые, к примеру, не читают вставленные таким образом MP3 файлы. Поэтому может возникнуть ситуация, что ваше видео не будет отображаться на странице.

• Чтобы избежать этого, используйте форматы видео, которые поддерживают большинством браузеров. Для видеофайлов это формат OGG, который поддерживают браузеры Opera, Chrome, Mozilla.

→ Если вас не пугает работа с HTML-исходниками ваших веб-страниц, можете вставить ролик Youtube на Joomla с помощью возможностей языка разметки.

Для этого в нужное место на странице добавьте код: ↓↓↓

• <video src=»ролик.ogg«></video>

Параметр SRC содержит путь к ролику. Если он хранится на сервере, достаточно указать только его название. Если вы добавляете его с другого источника, укажите полный путь к нему. В нашем случае нужно скопировать ссылку на файл в Ютубе из адресной строки браузера.

Тэг VIDEO имеет несколько параметров:

• Autoplay – это параметр без значения задает автоматическое воспроизведение, если он присутствует в тэге.
• Controls – атрибут без значения. Если он присутствует в тэге, браузер выведет элементы управления воспроизведением в окне плеера.
• Loop – еще один атрибут без значения. Ставит воспроизведение видео на повтор (зацикливает).
• Poster – параметр, который задает путь к файлу постера, который будет выводиться в окне плеера. Если он не задан, для этого будет использован первый кадр ролика.
• Height и width – параметры, задающие соответственно высоту и ширину плеера в пикселях.

Учитывая параметры, полный тэг VIDEO может выглядеть так:

• <video src=»ролик.ogg» autoplay controls height=”200” width=”200”></video>

В данном случае мы задаем воспроизведение файла ролик.ogg в плеере размерами 200х200 пикселей с элементами управления и автовоспроизведением.

→ Кроме того, вставить видео с Youtube на сайт Joomla с помощью HTML можно еще одним способом !!!  ↓

1. Под каждым роликом есть кнопка «Поделиться».

2. Нажмите ее и перейдите на вкладку «HTML-код».

3. Там вы можете задать нужные параметры, такие как размер окна плеера, воспроизведение похожих видео после просмотра и другие.

4. После этого просто скопируйте получившийся код и вставьте в нужное место страницы в режиме HTML-редактора. Если нужно, вы также можете вставить его в шаблон.

Вот, как можно вставить видео с Youtube на Joomla 3 с помощью HTML5.

3. Модуль Vidbox: эффектное воспроизведение видео

Это модуль для вставки файлов медиа с Youtube на сайты Joomla 3. Отличительная особенность Vidbox в том, что он позволяет открывать ролики во всплывающем окне.

Скачайте Vidbox из каталога Joomla, установите его и перейдите к настройке с помощью Менеджера модулей.

• Слева — задайте нужные параметры для модуля. Выберите для него нужное место в шаблоне и опубликуйте.

• Справа — в окне настроек в разделе Basic Settings нужно задать URL и тип файла, который вы хотите вставить. Также задайте размеры окна плеера и его миниатюры. Сохраните настройки.

В выбранном месте на странице вашего сайта Joomla 3 появится миниатюра плеера. При клике по ней видео c Youtube будет эффектно отображаться во всплывающем окне.

4. Youtube Playlist Wall

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

Скачать Youtube Playlist Wall можно в каталоге расширений Joomla. ↓

• С его помощью можно задать количество роликов в плейлисте, цветовое оформление и количество строк и столбцов.

• Кроме этого, можно менять внешний вид кнопок. Плагин поддерживает создание пользовательских стилей оформления с помощью CSS и HTML.

5. Создание видеогалерей с помощью Youtube Gallery

Компонент Youtube Gallery помогает создавать галереи видео на HTML-сайтах. Он доступен для скачивания и установки в каталоге расширений для Joomla.

Он имеет богатый набор возможностей: ↓

• Стандартные темы для оформления роликов
• Поддержка проигрывателя Adobe Flash
• Адаптация под мобильные устройства
• Настройка импорта и обновления роликов с Ютуба и др.

Если вы хотите создавать видеогалереи на сайте Joomla 3, скачайте удобное средство Youtube Gallery!

P.S — могу порекомендовать также вот эту видео — инструкцию ⇓

Вывод

Мы рассмотрели целых пять способов вставить видео с Youtube на Joomla. Выбирайте тот, который удобнее для вас и помогает вам решить поставленные задачи.

Успехов! 

YouTube HTML уроки для начинающих академия

Самый простой способ воспроизведения видео в HTML, это использовать YouTube.

Борется с видео форматов?

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

Преобразование видео в различные форматы может быть трудным и трудоемким.

Проще разрешить YouTube воспроизводить видео на веб-странице.

Идентификатор видео YouTube

YouTube будет отображать идентификатор (например, тгбнимз7вки), при сохранении (или воспроизведения) видео.

Этот идентификатор можно использовать и ссылаться на видео в коде HTML.

Воспроизведение видео на YouTube в формате HTML

Чтобы воспроизвести видео на веб-странице, выполните следующие действия.

• Загрузить видео на YouTube
• Принять к сведению идентификатор видео
• Определение элемента <IFRAME> на веб-странице
• Пусть src атрибут указывают на видео URL
• Используйте атрибуты width и Height для задания размера проигрывателя
• Добавьте другие параметры к URL-адресу (см. ниже)

Пример-использование IFRAME (рекомендуется)

<iframe
src=»https://www.youtube.com/embed/tgbNymZ7vqY»>
</iframe>

YouTube Автозапуск

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

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

Значение 0 (по умолчанию): видео не будет воспроизводиться автоматически при загрузке проигрывателя.

Значение 1: видео будет воспроизводиться автоматически при загрузке проигрывателя.

YouTube — Автозапуск

<iframe
src=»https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1″>
</iframe>

Плейлист YouTube

Разделенный запятой список видео для воспроизведения (в дополнение к исходному URL).

YouTube автоповтор

Значение 0 (по умолчанию): видео будет воспроизводиться только один раз.

Значение 1: видео будет цикл (навсегда).

YouTube — автоповтор

<iframe
src=»https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1″>
</iframe>

Управление YouTube

Значение 0: элементы управления проигрывателя не отображаются.

Значение 1 (по умолчанию): отображение элементов управления проигрывателя.

YouTube управление

<iframe
src=»https://www.youtube.com/embed/tgbNymZ7vqY?controls=0″>
</iframe>

YouTube использование <object> или <embed>

Примечание: YouTube <object> и <embed> были устаревшими с января 2015. Вы должны перенести ваши старое видео для использования <iframe> теперь.

Пример-использование <object> (устаревший)

<object
data=»https://www.youtube.com/embed/tgbNymZ7vqY»>
</object>

Пример-использование <embed> (устаревший)

<embed
src=»https://www.youtube.com/embed/tgbNymZ7vqY»>

Просмотр видео в письме — возможно ли это? — Блог EMAILMATRIX

Просмотр видео в письме может привлечь внимание подписчиков и решить много других проблем. Например, в видео можно показать, как пользоваться товаром или сервисом, или сделать обзор на продукт. Но много ли людей смогут увидеть такую фишку? Давайте разберёмся.

Раньше в письма можно было вставлять видео с Youtube и Vimeo — прописывая прямую ссылку на видеоролик. Это был отличный вариант, который работал в веб-интерфейсах Mail.ru и Gmail — что давало неплохой охват аудитории. Однако теперь это не работает.

На сегодняшний день наиболее очевидный вариант размещения видео в письме — это использование html5-тега <video>:

<video poster="http://yoursite/img/backup_bunny2.jpg" controls="controls">
	<source type="video/mp4" src="http://yoursite/img/mov_bbb.mp4"></source>
	<source type="video/ogg" src="http://yoursite/img/mov_bbb.ogg"></source>
	<source type="video/webm" src="http://yoursite/img/mov_bbb.webm"></source>
	<a href="http://yoursite/link.html"><img src="img/backup_bunny2.jpg" /></a>
</video>

Но, к сожалению, такой вариант будет работать лишь в некоторых почтовых клиентах — Thunderbird, Apple mail, Mail на iOS. Остальные же почтовики покажут альтернативный контент, который вы пропишите в теге <video>. В вышеупомянутом примере это картинка со ссылкой:

<a href="http://yoursite/link.html"><img src="img/backup_bunny2.jpg" /></a>

По итогу охват получается совсем небольшой, поэтому мы не рекомендуем использовать html5-тег <video>, если только все ваши подписчики не сидят исключительно в Thunderbird, Apple mail, Mail на iOS 🙂

Вариантов вставки и просмотра видео в письме особо не осталось, но в качестве альтернативы можно сделать имитацию видеоролика. Для этого добавьте в емейл gif-анимацию первых кадров видео, повесьте на неё ссылку на ролик и разместите поверх гифки иконку воспроизведения — чтобы дополнительно мотивировать подписчика кликнуть.

Такую имитацию видео с Ютуба использовали, например, Kia в своём письме:

Конвертировать видео в гифку можно, например, в After Effects или Photoshop. Правда, во втором случае объём файла будет больше, а качество хуже. Значок воспроизведения можно наложить в том же After Effects. Для этого сохраните его в формате png с прозрачным фоном.

After Effects — программное обеспечение для создания анимационной графики и визуальных эффектов.

Ориентируйтесь исключительно на вашу аудиторию, на их предпочтения и среду открытий. То, что не рекомендуется одним, может стать отличным решением для других. В маркетинге всегда есть место экспериментам и тестированию 😉

* Если вам интересно разобраться и сравнить, как раньше можно было вставлять видео в письма, читайте в развороте предыдущую версию этой статьи от 25.11.2014.

25 ноября 2014

5 мин.

C появлением таких сервисов, как Youtube и Vimeo, и таких направлений, как видеоблоги, вебинары и т. д., видео стало неотъемлемой составляющей глобальной сети и емейл-рассылок в частности.
В статье я разберу три способа, как разместить видеоконтент в теле письма. Кстати, примеры с HTML5-кодом можно копировать и вставлять в вёрстку, внося небольшие изменения.

Самый простой способ добавить видео — разместить в теле емейла ссылку на необходимый видеоролик. Такой подход прост, но неудобен — пользователю необходимо перейти на сторонний сайт, открыть интернет-браузер (если он пользуется почтовым клиентом) и только потом просмотреть ролик.

Просмотр видео непосредственно в письме гораздо удобнее, особенно если видео длится всего пару минут.

Это можно реализовать на HTML5:

<video poster="http://yoursite/img/backup_bunny2.jpg" controls="controls">
	<source type="video/mp4" src="http://yoursite/img/mov_bbb.mp4"></source>
	<source type="video/ogg" src="http://yoursite/img/mov_bbb.ogg"></source>
	<source type="video/webm" src="http://yoursite/img/mov_bbb.webm"></source>
	<a href="http://yoursite/link.html"><img src="img/backup_bunny2.jpg" /></a>
</video>

• параметры width и height отвечают за ширину и высоту видеоблока;
• poster — стоп-кадр, который показывается до запуска видео;
• controls добавляет панель управления к видеоролику.

К сожалению, просмотр HTML5-видео в письме поддерживают не все почтовые клиенты и веб-интерфейсы почтовых провайдеров. Например, Mail.ru и Gmail.com покажут альтернативный контент в виде изображения и ссылки в нашем случае. Чтобы посмотреть видео, подписчику придётся перейти из письма на сайт.

 
<a href="http://yoursite/link.html"><img src="img/backup_bunny2.jpg" /></a>

Чтобы не заставлять пользователя совершать лишние действия, разместите видео на слое. Для этого повесьте ссылку ролика на изображение, а само видео залейте на Youtube. Отмечу, что Mail.ru показывает видео не только из Youtube, но и из Vimeo.

Для наибольшего охвата аудитории совместите оба подхода:

<video poster="img/backup_bunny2.jpg" controls="controls">
	<source type="video/mp4" src="img/mov_bbb.mp4"></source>
	<source type="video/ogg" src="img/mov_bbb.ogg"></source>
	<source type="video/webm" src="img/mov_bbb.webm"></source>
	<a href="http://www.youtube.com/watch?v=YE7VzlLtp-4"><img src="img/backup_bunny2.jpg" /></a>
</video>

Для подсчёта кликов и наглядной статистики рассылки ESP экранирует прописанные в теле письма ссылки. В этом случае ссылка на Youtube не будет распознана и не откроется.

Чтобы этого избежать, отключите отслеживание кликов в платформе. Ссылка останется прямой и корректно откроется на слое в веб-интерфейсе Mail.ru и Gmail.com.

Gmail.com

Mail.ru

Где поддерживается

Компания Apple никак не определится со своими взглядами на тег HTML5 <video>. В версиях до iOS 7 включительно он был им люб, но в iOS 8 и iOS 9 перестали поддерживать. В последних версиях iOS 10 и iOS 11 его поддержку вернули.

У iOS 10/11 есть одна особенность — в качестве превью не отображается первый кадр видео, как это сделано в предыдущих версиях. Чтобы задать превью видео, используйте атрибут poster (poster="").

iOS 7:

iOS 10/11:

Итоги

Просмотр видео в письме — удобное решение для пользователя. Но любое отправленное емейл-сообщение имеет маркетинговую цель. В зависимости от конечной цели меняется подход размещения видео в письме.

• Ваша цель: привлечь трафик на сайт. Используйте классический подход — разместите в теле емейл-сообщения изображение на видео с ссылкой на сайт.
• Ваша цель: рост лояльности подписчиков. Проследите, чтобы видео проигрывалось в теле письма. Для этого используйте HTML5-видео или видео на слое (Mail.ru, Gmail).

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

• Ваша цель: привлечь подписчиков в ваш Youtube-канал. Не выключайте сбор статистики в ESP или вместо прямой ссылки вставьте сокращённую. Видео не будет проигрываться на слое, а перекинется в Youtube.

Код для вставки Youtube не работает в HTML

TL; DR

Youtube позволяет транслировать только страницы https со встроенными / встроенными фреймами.

Убедитесь, что встраивание разрешено владельцем видео.

Установите менее строгую политику реферера, такую ​​как «no-referrer-when-downgrade», чтобы YouTube мог узнать источник запроса. В django вы можете сделать это, добавив следующую строку в settings.py

  SECURE_REFERRER_POLICY = "без реферера при понижении"
  

Длинное чтение:

Если вы недавно столкнулись с этим в приложении django, это могло быть связано с недавним изменением политики реферера в django 3.Подробнее здесь

Когда вы добавляете iframe для видео на YouTube (, учитывая, что владелец видео разрешает встраивать ), реферер (источник хоста, на котором воспроизводится видео) отправляется на youtube скриптами внутри iframe (встроенный URL получает новую страницу со всеми необходимыми скриптами). Если сервер устанавливает политику реферера, которая предотвращает обмен информацией о реферере, youtube отклоняет запрос воспроизведения и отвечает 204 — нет контента.

Начиная с django v3.x, политика реферера по умолчанию установлена ​​на «то же происхождение», что слишком ограничивает, чтобы YouTube знал о происхождении. В этом случае youtube не разрешает воспроизведение видео и отвечает кодом 204.

Эту проблему можно решить, установив менее строгую политику реферера. Вы можете использовать «no-referrer-when-downgrade». В django вы можете установить это с помощью следующей переменной в файле settings.py .

  SECURE_REFERRER_POLICY = "без реферера при понижении"
  

Приведенная выше политика гласит, что реферер будет отправлен как пустой, когда протокол доступа будет понижен, иначе источник будет отправлен как реферер (что приемлемо).Учитывая, что youtube допускает только https origin , в этом случае это означает, что если iframe встроен в веб-страницу с https, реферер будет отправлен правильно и не должен вызывать проблем при воспроизведении видео на YouTube через такие встраивания .

Как встроить видео Youtube в HTML

Если мы хотим встроить видео Youtube в документ Html, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко показать видео Youtube на веб-странице.

Шаг 1: Во-первых, мы должны загрузить видео на Youtube, которое будет показано на веб-странице. И затем мы должны взять идентификатор этого видео.

Шаг 2: Теперь нам нужно ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в который мы хотим встроить видео.

<Голова> <Название> Вставить видео с Youtube <Тело> Привет, JavaTpoint!

Привет, пользователь!

Шаг 3: Затем мы должны поместить курсор в ту точку, где мы хотим показать видео.После этого мы должны определить тег

Шаг 3: Теперь нам нужно добавить атрибут тега iframe с именем « src ».Итак, введите атрибут src в теге

Шаг 4: После этого мы должны указать URL того видео Youtube, которое мы хотим встроить.Итак, введите URL-адрес видео в атрибут src .

Шаг 5: После этого мы также можем установить размеры (ширину и высоту) игрока, используя два разных атрибута, как показано в следующем блоке:

Шаг 6: И, наконец, мы должны сохранить файл Html или код HTML в текстовом редакторе.А затем запустите файл.

<Голова> <Название> Вставить видео с Youtube <Тело> Привет, JavaTpoint!

Привет, пользователь!