Интернет и с чем его едят

Как вставить видео с Ютуба на сайт

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

Дополнительные преимущества вставки видео с Youtube на сайт

Получение дохода от показа ролика, если он принадлежит владельцу интернет-сайта.

Увеличение популярности веб-ресурса.

Пополнение медиа-контентом.

Демонстрация портфолио.

Но отсылать посетителя со своего сайта на видео-хостинг неудобно, так как не хочется его терять. Кроме того, каждая лишняя исходящая ссылка “переливает” вес с вашего сайта. А зачем это нужно?

Рассмотрим инструменты, при помощи которых можно разместить видео с Ютуба на сторонний сайт.

Вставка html-кода фрейма.

Это самый простой способ ретрансляции видео. HTML-код находится на странице видеоролика в Youtube. Нажимаем “Поделиться”.

В поле снизу появляется прямая ссылка на ролик. Но мы выбираем “Встроить” - <> и получаем код видео с Youtube для сайта.

Устанавливаем настройки и копируем его в буфер.

Затем заходим в систему администрирования нашего сайта (предположим, что это MODx). Открываем исходный код той веб-страницы сайта, на которую следует вставить видео с Youtube и размещаем его. 

Нажимаем “сохранить” и проверяем.

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

width и height – его размеры;

src – путь;

frameborder – рамка есть или нет;

allowfullscreen – полноэкранный вид.

2. Вставка html-кода video

Он отображает видеоролики на веб-странице. 

Его синтаксис:

Атрибуты:

width и height – его размеры;

src – путь, который может задаваться через вложенный <sourse>;

autoplay - самопроизвольно включается в момент загрузки веб-страницы;

controls - ролик отражается вместе с панелью управления;

loop - зацикливает повтор;

poster - показывает посетителю картинку, если с его отображением возникают проблемы - следует указать путь к изображению-загрушке;

preload - видео загружается одновременно со страницей;

frameborder – рамка есть или нет;

allowfullscreen – полноэкранный вид.

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

Тег <sourse> можно вставить несколько раз в <video>, ссылаясь на ролики в разных форматах. Пользователь сможет выбрать удобный для просмотра вариант самостоятельно.

3. Видеоплееры на основе JavaScript и Flash.

Только программист сможет внедрить такое приложение к движку.  Самым оптимальным и простым из них считается Spruto. На его официальном интернет-проекте можно настроить функционал и внешний вид.