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

Зачем сайту видео?
Люди, исповедующие консервативный взгляд на значение интернета в распространении информации, рассматривают его как цифровой вариант обычного печатного таблоида. Но прогрессивная часть пользовательской аудитории не готова мириться с таким мнением. Им мультимедийность подавай! Одним из таких веяний и является ретрансляция видео с 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
Порядок действий:
- Заходим в админку сайта;
- Слева в меню выбираем вкладку «Записи», «Добавить новую»;
- Пишем заголовок записи;
- Вставляем шорткод и ссылку на видео;
- Справа жмем на «Опубликовать»:

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

Но это не единственный способ того, как вставить видеоплеер на сайт WordPress. Также можно воспользоваться специализированными плагинами.
Вот некоторые из них:
- JW Player;
- Video.js;
- Spider Video Player.
2. Joomla – с этим движком все обстоит не так просто. Поэтому лучше для вставки видео и аудио данных воспользоваться специализированными плагинами.
Вот несколько проверенных:
- AllVideos;
- Vidbox;
- AllVideos Reloaded.
На этом все! Надеемся, что с такими познаниями о том, как вставить видео на сайт, у вас теперь достаточно возможностей для выражения мыслей и чувств на страницах своего ресурса. Некоторыми из них вы можете поделиться с нами, оставив комментарий к этой статье.