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

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

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

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

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

Что это дает:

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

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

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

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

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

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

Все методы, как можно вставить видео с Youtube на веб-сайт Для начала давайте разберемся, что такое фрейм. Этот элемент в 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>:

Все методы, как можно легко вставить видео с Youtube на веб-сайт А вот как выводится видео в плеере на странице нашего шаблона:

Все методы, как можно без проблем вставить видео с Youtube на веб-сайт
  1. Использование тега <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.

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

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

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

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

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

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

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

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

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

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

  • JW Player;
  • Video.js;
  • Spider Video Player.

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

Вот пару проверенных:

  • AllVideos;
  • Vidbox;
  • AllVideos Reloaded.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *