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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• AllVideos ;
• Vidbox ;
• AllVideos Reloaded .

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

Здравствуйте, я обнаружил что один сайт ворует мои видео с моего канала на ютубе и размещает их автоматический, сразу после их опубликования ЧТО ДЕЛАТЬ ? Как запрещать кражу? Спасибо!

Здравствуйте! Спасибо за исчерпывающий материал!

У меня такой вопрос: Можно ли вставить видео так, чтобы отображались кнопки лайк/дизлайк. А то просмотры идут, а вот переходить на ютуб и тыкать на кнопочки народу ну очень уж лень.

Интернет експлорер не показывает ролики с ю-тьюба, вставленные через iframe. Есть на этот счет какие-то советы?

здравствуйте! У меня есть свой сайт. На моем сайте есть возможность вставлять видео youtube но при этом монетизация не включается подскажите что можно сделать?