Все способы, как можно вставить видео с Youtube на сайт

2022-05-19

Иногда так хочется высказаться, объяснить суть происходящего, что даже не хватает слов. Поэтому начинаешь жестикулировать руками, пытаясь выразить переполняющие тебя чувства. Так бывает и с авторами контента, и для самовыражения кроме слов они иногда используют визуальные средства. Поэтому давайте разбираться, как вставить видео с youtube на сайт:

Зачем сайту видео?
- Способы размещения видео на сайте
- Интеграция видео на сайтах, развернутых на основе CMS

Зачем сайту видео?

Люди, исповедующие консервативный взгляд на значение интернета в распространении информации, рассматривают его как цифровой вариант обычного печатного таблоида. Но прогрессивная часть пользовательской аудитории не готова мириться с таким мнением. Им мультимедийность подавай! Одним из таких веяний и является ретрансляция видео с Youtube на своем сайте.

Что это дает:

Дополнительный источник дохода – за показ видеороликов владелец сайта получает деньги;
Дополнение к материалу – часто видео данные выступают дополнением к текстовому контенту. Это делает изложение информации более полным и исчерпывающим. Особенно эффективно использование такого дополнения во время обучающего процесса;

С помощью видео можно более наглядно показать, как все должно происходить на практике

Как способ привлечения посетителей – можно вставить видео на сайт, чтобы увеличить популярность ресурса. Но для этого нужно использовать уникальные ролики, и лучше те, которых нет на популярных видео хостингах. Например, если вы являетесь автором какого-нибудь курса. И чтобы увеличить посещаемость своего сайта, бесплатно выкладываете на нем некоторые из уроков для просмотра;
В форме портфолио – подразумевается использование пространства ресурса для демонстрации своих возможностей как высококлассного специалиста в какой-либо сфере. Это могут быть видеоролики, в процессе съемки которых автор выступал режиссером и оператором. Или отснятая обстановка помещения, дизайн которой разрабатывался вами.

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

Способы размещения видео на сайте

Здесь мы рассмотрим наиболее популярные способы. Вот они:

Вставка кода фрейма с Youtube – является наиболее легким методом реализации. Подходит для ретрансляции своего или чужого тематического видео с этого хостинга у себя на сайте. Код для вставки в html можно найти на страничке видеоролика в Youtube. Он находится сразу под окном плеера во вкладке «HTML-код»:

Для начала давайте разберемся, что такое фрейм. Этот элемент в html позволяет отображать содержимое другой веб-страницы в дочернем окне, размещенном на странице основного сайта. Возьмем пример кода фрейма с приведенного выше рисунка:

<iframe width="560" height="315" src="https://www.youtube.com/embed/3jT_q7dt-cM" frameborder="0" allowfullscreen>
</iframe>

С помощью тега <iframe> создается плавающий фрейм, который является своего рода контейнером, позволяющим загружать содержимое другой веб-страницы.

Атрибуты тега:

width – задается длина окна фрейма;
height – устанавливается высота окна плавающего фрейма;
src – путь к файлу, содержимое которого будет воспроизводиться;
frameborder – устанавливает отображение рамки вокруг фрейма. Поддерживаются значения yes или no, 1 или 0 (нет);
allowfullscreen – разрешение на полноэкранное отображение видео.

Как видите, значение некоторых атрибутов можно с легкостью подправить под свои нужды. Прежде всего, это касается размеров отображаемого фрейма. Теперь осталось вставить его код в html вашего сайта. При этом главное учесть соразмерность окна вашего сайта и фрейма. Но если что-то пойдет не так, размеры можно легко подогнать.

Для демонстрации мы взяли шаблон простого двухстраничного сайта. Код плавающего фрейма вставляется в любой из блоков <div>, расположенных между тегом <body>:

А вот как отображается видео в плеере на странице нашего шаблона:

Использование тега <video> - позволяет размещать, воспроизводить и проигрывать видео на веб-странице. Его атрибуты:

autoplay – воспроизведение видео начинается сразу после загрузки страницы сайта;
controls – к ролику добавляется панель управления проигрывателем;
width, height – отвечают за размеры окна видеоплеера;
loop – включает автоматическое повторение воспроизведения видео сразу после его окончания;
poster – устанавливает картинку, которая будет отображаться, пока идет загрузка видео. Или если его воспроизведение недоступно;
preload – включает предварительную загрузку видео во время загрузки браузером веб-страницы;
src – задает путь к видеоролику.

Пример реализации:

<video width="400" height="300" controls="controls" poster="1.png">
   <source src="Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="Wildlife.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="Wildlife.webm" type='video/webm; codecs="vp8, vorbis"'>
  </video>

Как видно из примера, в тегах <source> реализовано несколько вариантов источников. То есть перед тем, как вставить видео на сайт, его нужно будет «перегнать» в несколько форматов. В зависимости от поддерживаемого формата браузер сам выберет нужный ему вариант.

Более детально о поддерживаемых различными браузерами форматах видео можно узнать из технической документации к языку html.

Вот как это выглядит на нашем сайте:

Использование видеоплееров на основе JavaScript и Flash – самый трудный для реализации вариант. «Вживления» кода таких плееров в ваш сайт требует специальных знаний и навыков. Наиболее оптимальным является бесплатный видеоплеер Spruto. На официальном сайте с помощью конструктора можно настроить его внешний вид и функционал приложения:.

Затем нужно скачать его в виде архива или скрипта. При этом в комплект архива входит подробная документация для настройки и «безболезненной» интеграции видеоплеера на ваш ресурс:

Интеграция видео на сайтах, развернутых на основе CMS

1. WordPress – в этом популярном движке, начиная с версии 2.9, реализована поддержка вставки обычной ссылки на ролик, расположенный на одном из популярных видео хостингов. Для этого нужно всего лишь воспользоваться специальным шорткодом. Его синтаксис:

 Ссылка на видео с YouTube

Порядок действий:

Заходим в админку сайта;
Слева в меню выбираем вкладку «Записи», «Добавить новую»;
Пишем заголовок записи;
Вставляем шорткод и ссылку на видео;
Справа жмем на «Опубликовать»:

Интеграция видео на сайтах, развернутых на основе CMS

Вот как выглядит добавленный видеоролик на странице сайта:

Интеграция видео на сайтах, развернутых на основе CMS - 2

Но это не единственный способ того, как вставить видеоплеер на сайт WordPress. Также можно воспользоваться специализированными плагинами.

Вот некоторые из них:

JW Player;
Video.js;
Spider Video Player.

2. Joomla – с этим движком все обстоит не так просто. Поэтому лучше для вставки видео и аудио данных воспользоваться специализированными плагинами.

Вот несколько проверенных:

AllVideos;
Vidbox;
AllVideos Reloaded.

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