Код ролика на youtube где взять

Как получить HTML-код для вставки на сайт видео с YouTube

Видео с YouTube вовсе не обязательно просматривать только на сайте www.YouTube.com. Наверняка приходилось встречать ролики, расположенные на видео-хостинге YouTube, которые вставлены в посты в социальных сетях или на чьи-нибудь сайтах. В этой статье подробно рассмотрим, где и как взять HTML-код для того, чтобы вставить себе на сайт своё (или понравившееся) видео с YouTube.

Как узнать адрес YouTube видео, расположенного на сайте

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

Ссылки «Поделиться» ролика с YouTube

Клик по хитровывернутой стрелки приведёт к тому, что в окне видео-плеера YouTube поверх самого видео появится слой «Поделиться» с прямой ссылкой на видео. Но нам нужна не ссылка на видео, нам нужен HTML-код для вставки этого видео на сайт. Поэтому двигаемся дальше и кликаем по кнопке . :

HTML-код для вставки на сайт видео с YouTube

Ура-ура! В новой вкладке откроется собственно страница с видео на сайте YouTube. А это нам и нужно. Смотрим на то, что расположено ниже видео и делаем следующее:

1. Находим ссылку «Поделиться» (уже со знакомой нам хитровывернутой стрелкой), кликаем по ней!
2. В выпавшем меню, находим ссылку «HTML-код».

В общем-то всё!

Во вкладке «HTML-код», найденной выше будет то, что мы искали:

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

Также есть расширенные настройки во вкладке YouTube «HTML-код», но это тоже отдельная тема.

Заберите ссылку на статью к себе, чтобы потом легко её найти: выберите, то, чем пользуетесь чаще всего:

Как вставить видео на сайт с YouTube? Секретные фишки

Вставить на сайт видео с YouTube или другого хостинга достаточно просто, тем более вам предлагают для этого готовые коды. Поговорим о том, где их найти, как изменить и как вставить в статью только средствами HTML.

Начинаем с того, что идем на YouTube, через поиск находим и выбираем видеоролик, раскрывающий тему нашей статьи.

Как найти подходящее видео для вставки на страницу своего сайта

Для того, чтобы найти подходящий по содержанию видеоролик, на главной странице YouTube вбиваете в поисковую строку ключевую фразу своей статьи и выбираете из предложенных вариантов. Если какое-то видео вам понравилось, переходите к следующему шагу.

У нас ключевой фразой выбрана: «вставить видео на сайт»

Где найти код видео для вставки

Получить код можно двумя путями:

Первый

Кликаете правой клавишей мыши по видео и во всплывающем окне на «Копировать HTML-код». Он сохраняется в буфере обмена, откуда сразу вставляете его на страницу сайта. Изменить код можно будет только там.

Второй путь

Длиннее, но, на наш взгляд, проще для новичков в кодировании.

На странице с видеороликом внизу (шаг №1 ) жмете на «Поделиться». Открывается окно со ссылкой, которая вам сейчас не нужна. Кликайте на кнопку с двумя стрелками, в какие обычное закрывают html, «Встроить» (шаг №2).

Появляется готовый iframe-код для размещения на сайте. Для выделения, можете кликнуть по нему один раз левой клавишей мыши или сразу «Копировать». Код автоматически выделится и сохранится в буфере обмена. На скриншоте справа он отмечен красной рамкой.

Можете размещать на сайте как есть.

Зеленой галочкой выделен чек-бокс, где можно выставить желаемое начало проигрывания ролика на сайте

Как вставить полученный код на страницу сайта

Чтобы вставить полученный код видео, переходите в html-редактор записи на сайте. На картинке ниже показан красной стрелкой. И вставляйте в нужную строку горячими ctrl+V или правой клавишей мыши.

В «простыне» кода легче сориентируетесь, если перед этим в визуальном редакторе выделите будущее расположение видео:

• любым текстом или
• простановкой пробелов, которые позже удалите.

Как изменить параметры показа видеоролика

Если, просмотрев найденный ролик, вы поняли, что хотите:

• обрезать c начала или в конце, а может быть
• оставить только середину.

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

Сейчас важно разобрать часть элементов кода, которые на скрине ниже подчеркнуты красным:

1) Hrgbis-tZHw — идентификатор видео, для каждого ролика он свой;
2) знак вопроса ( ? ) — выставляется всегда после идентификатора и показывает, что дальше идут параметры этого видео;
3) start=(время начала ролика в секундах)»

Как вставить или изменить другие дополнительные параметры

Итак, у вас появился первый дополнительный элемент — время, с которого ролик начнет воспроизводиться. Встал он после идентификатора видео через знак вопроса ( ? ).

Все последующие параметры вставляем, разделяя знаком & (амперсанд).

На клавиатуре & находится в верхнем ряду на клавише 7, верхний регистр в английской раскладке.

Как задать время остановки ролика

Помните, что время начала и остановки показа видеоролика можно изменить, даже когда html-код уже размещен на сайте

Чтобы добавить время, когда ролик должен быть остановлен, вставляем в наш код: end=время в секундах». Выглядеть это будет вот так:

Пример на скриншоте:

Ниже пример ролика с измененными параметрами старта и окончания. Кстати, рекомендуется посмотреть. Ролик как раз по нашей теме.

Если вы перейдете на YouTube и посмотрите это же самое видео, то увидите много лишней и личной информации от автора. Но, мы ценим свое время и наших читателей, поэтому режем:

Время выставляете по своему усмотрению:

• с начала start=100, где 100 – это время в секундах, от которого будет проигрываться видео на вашем сайте;
• и в конце параметр end=240, где 240 — время в секундах, до которого видеоролик будет показываться читателям.

Ниже скрин кода вставленного видео:

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

Также для этого ролика добавлены по 100 единиц для ширины и высоты.

Как увеличить размер видеоплеера

Иногда возникает необходимость увеличить размер видеоплеера или сделать меньше.

Для этого придется изменить в html-коде ролика параметры ширины width= ”560”и высоты height= ”315” на другие (подчеркнуты красным на скрине выше).

Например, чтобы увеличить окно с видео, можно вместо width= ”560” height= ”315” выставить: width= ”760” height= ”515”, добавив одинаковое число пунктов для каждого (здесь по 200). Можно уменьшить окно, изменив оба числа в меньшую сторону на одинаковое количество пунктов, например на 100 и 100. Это важно, чтобы не нарушить пропорции.

Размещаем видеоролик на странице сайта

Еще раз акцентируем внимание: html-код выбранного видеоролика размещается в редакторе записи WordPress на вкладке «Текст».

Там же, вокруг него можете дописать код, определяющий положение видеоплеера: слева, по центру или справа.

Для этого подойдет контейнер <div>, обязательно с закрывающим тегом </div>.

<div align=» здесь место расположения «>код видеоплеера</div>

Выравнивание	Код
По середине	center
У левого края	left
У правого края	right

Пример выравнивания по середине с помощью такого блока показан на скриншоте выше↑

Завершив работу, сохраните страницу или обновите, если она уже опубликована.

Как сделать тайм-код для размещенного в статье видеоролика

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

<div align=” center ”>

<iframe src=“//www.youtube.com/embed/p2k0Q-kQ3Ao?rel=0” name=“raz” width=“660” height=“415” frameborder=“0” allowfullscreen=“allowfullscreen”></iframe>

<a href=“//www.youtube.com/embed/p2k0Q-kQ3Ao?rel=0&amp;autoplay=1&amp;start=49” target=“raz” rel=“noopener”>00:00:49 Первая часть</a>
<a href=“//www.youtube.com/embed/p2k0Q-kQ3Ao?rel=0&amp;autoplay=1&amp;start=80” target=“raz” rel=“noopener”>00:01:20 Вторая часть</a>
<a href=“//www.youtube.com/embed/p2k0Q-kQ3Ao?rel=0&amp;autoplay=1&amp;start=163&amp;end=176” target=“raz” rel=“noopener”>00:02:43 Третья часть</a>

Если отображается некорректно — смотрите скриншот:

Как вставить несколько видео в одну статью сайта (для темы Reboot и Root)

Иногда может потребоваться добавить несколько видео в статью. И чтобы видеоролики не выстраивались последовательно друг за другом (к сожалению, в смартфоне их расположение так и остается последовательным), а вставали компактно. Например, вот так:

Предлагаем использовать следующий код:

Для трех видео в ряд

По сути, можете сохранить все, а поменять только идентификатор ролика (отмечен красным на рисунке выше).

Можете пойти другим путем: скопированный с YouTube код для встраивания разместить в статье подряд три раза, а затем обернуть в <div для встраивания</div>.

Для шести видео в 2 ряда

Повторяете еще раз тот же код с добавлением между блока разделителя <br>. Смотрите в спойлере:

Важный элемент — дополнительный стиль в css

Нужно заметить, что предложенный выше код не будет работать без внедрения в тему дополнительного стиля css.

Добавить его не составит труда. Нужно в консоли сайта перейти: Внешний вид → Настройки → Дополнительные стили. И вставить предложенный ниже текст.

Разворачивайте спойлер и копируйте.

.youtube—x3 <
display: flex;
flex-wrap: wrap;
justify-content: space-around;
>

.youtube—x3 iframe <
width: 240px !important;
height: 135px !important;
>
@media (max-width: 1024px) <
.youtube—x3 iframe <
width: 560px !important;
height: 350px !important;
>
.youtube—x3 iframe:not(:nth-child(1)) <
margin-top:8px;
>
/* Вставляем 3 видео в ряд, каждое разворачивается*/
>

Тот же код изображением:

И, да… Скорость загрузки статьи от большого числа роликов, размещенных предложенным способом, не пострадает. ?

Как еще проще установить видео с YouTube на сайт

А теперь подарок для тех, кто дочитал до конца. ↓

Самый легкий способ получить ссылку необходимого формата для внедрения в статью — воспользоваться нашим скриптом, предложенным ниже.

Код ролика на youtube где взять

Для того, чтобы вставить видео из youtube — вам нужно найти код видео.

Открываем видео, которое хотим вставить на сайт, внизу, под видео ищем кнопку «поделиться» — нажимаем:

Далее: В новом окне ищем обозначение тегов » <> »
Новое окно:

В новом окне, справа у ва окажется код, нажимаем по нему один раз, он станет выделенным.

После этого вы можете скопировать код видео с youtube? нажав кнопку «копировать» :

Вставляем видео на сайт с youtube

После того, как вы скопировали код видео youtube для вставки на сайт.

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

Поскольку — у нас все просто, я просто открываю код страницы и вставляю туда код видео:

Получаем результат: Не забываем сказать спасибо! Я старался для вас!

Как сделать автоматическое воспроизведение видео с youtube

Интересно то, что когда видишь какой-то контент в интернете, то очень часто так случается, что авторы просто перепечатывают, и никаких примеров — и вообще сами разбирайтесь!

Я для вас разобрался.

В каких браузерах функция «autoplay» для видео с youtube проверено!? Только на стационарном компьютере:

В каких браузерах проверено и работает autoplay

Internet Explorer- на удивление тоже работает.

Остальные браузеры вам предстоит протестировать самостоятельно!

Какой код нужно добавить, чтобы сработал автоматический запуск видео в youtube на сайте

После адреса в атрибуте src вставляем, где «ID_VIDEO» идентификатор видео — он стоит последним в адресной строке, в пример выделено красным :

В allow должно присутствовать «autoplay»

Код для запуска автоматического воспроизведения видео с youtube на сайте:

<iframe width="700" height="350" src="https://www.youtube.com/embed/2DzZt8ETkyA?autoplay=1&amp;loop=1&amp;&amp;playlist=2DzZt8ETkyA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>

Пример запуска автоматического воспроизведения видео с youtube на сайте:

И ни разу не увидел пример запуска автоматического воспроизведения видео с youtube на сайте, а у нас есть.

Если видео не запустилось, то скорее всего ваш браузер автозапуск не поддерживает, либо нужны какие-то отдельные настройки.

Как запустить видео с определенной точки

Мы уже проделали почти все действия в этом пункте — дошли до момента выделения кода. и далее немного алгоритм действий будет изменен:

Нажимаем галку — «Начало»

Устанавливаем время. с какой секунды будем воспроизводить видео!

Разберем «запуск видео с определенной точки» на примере

Пусть будет запуск с после первой минуты воспроизведения, выставляем «1:00»

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

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

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

• Получение дохода от показа ролика, если он принадлежит владельцу интернет-сайта.
• Увеличение популярности веб-ресурса.
• Пополнение медиа-контентом.
• Демонстрация портфолио.

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

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

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

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

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

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

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

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

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

• width и height – его размеры;
• src – путь;
• frameborder – рамка есть или нет;
• allowfullscreen – полноэкранный вид.

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

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

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

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

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

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

Размещаем URL, делаем настройки и получаем код.

Можно скачать плеер полностью для установки или только код в формате JS или FLASH. В комплект скрипта входит руководство по установке.

4. Спецсредства в движках (CMS).

Во многих CMS предусмотрены встроенные плагины, которые позволяют работать с видеороликами.

WordPress

В последних версиях можно вставить простую ссылку на Ютуб напрямую. В режиме Html (Text) просто вставляется в нужном месте ссылка на странице и сохраняется. При этом происходит полноценное отображение ролика на сайте. Указатель ?autoplay=1 позволит ролику включаться автоматически при открытии страницы пользователем.

Плагины

Многие CMS работают только с плагинами, Например Joomla доступны а AllVideos или Vidbox. Рассмотрим первый из них.

После скачивания необходимо стандартным способом установить плагин и активировать его. Затем настраиваем: выбираем шаблон, размер плеера, папку для хранения файлов и т.д.
Для каждого видео в Ютубе генерируется уникальный идентификатор, его можно найти в адресной строке в момент просмотра.

Копируем его, затем в нужно месте страницы в Джумла вставляем код типа

На этом все! Вы можете использовать один из методов, чтобы дополнить содержимое вашего сайта.