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

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

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

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

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

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

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

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

Первый

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

где скопировать HTML-код кликом правой клавиши мыши

Второй путь

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

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

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

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

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

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

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

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

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

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

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

  • обрезать 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 (тайм код) еще более упростит взаимодействие читателей вашей статьи с видеоматериалами. Он позволит в любой момент вернуться к нужной части видеоролика, не прокручивая весь. Актуально, когда в длинном ролике необходимо выделить какие-то особенно важные моменты.

00:00:49 Первая часть
00:01:20 Вторая часть
00:02:43 Третья часть

В спойлере текстовый вариант реализации:

<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>

</div>

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


код видео поделенного для просмотра частями


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

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



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

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

Код для встраивания трех видео на страницу

Скопировать код можете из спойлера →
<div class=“youtube—x3”>
<iframe width=“33%” height=“33%” src=“https://www.youtube.com/embed/ZT09_pFjUaM” title=“YouTube video player” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
<iframe width=“33%” height=“33%” src=“https://www.youtube.com/embed/ZT09_pFjUaM” title=“YouTube video player” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
<iframe width=“33%” height=“33%” src=“https://www.youtube.com/embed/ZT09_pFjUaM” title=“YouTube video player” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
</div>

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

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

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

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

Смотрите в спойлере →
<div class=»youtube—x3″>
<iframe width=“33%” height=“33%” src=“https://www.youtube.com/embed/ZT09_pFjUaM” title=“YouTube video player” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
<iframe width=“33%” height=“33%” src=“https://www.youtube.com/embed/ZT09_pFjUaM” title=“YouTube video player” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
<iframe width=“33%” height=“33%” src=“https://www.youtube.com/embed/ZT09_pFjUaM” title=“YouTube video player” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
</div>
<br>
<div class=»youtube—x3″>
<iframe width=“33%” height=“33%” src=“https://www.youtube.com/embed/ZT09_pFjUaM” title=“YouTube video player” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
<iframe width=“33%” height=“33%” src=“https://www.youtube.com/embed/ZT09_pFjUaM” title=“YouTube video player” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
<iframe width=“33%” height=“33%” src=“https://www.youtube.com/embed/ZT09_pFjUaM” title=“YouTube video player” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
</div>

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

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

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

Путь к форме для встраивания css стиля Разворачивайте спойлер и копируйте.

Дополнительный стиль css для темы Reboot или Root от WPShop

.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 видео в ряд, каждое разворачивается*/
}

Тот же код изображением:текст css стиля для встраивания 3-х видео YouTube в ряд для темы Reboot и Root

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

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

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

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

С помощью этой программки можно:

  • взять с YouTube совершенно любую ссылку, даже из поисковой строки браузера, и преобразовать ее одним кликом мыши в необходимый <iframe>;
  • легко установить время начала и окончания ролика без пересчета в секунды, при этом данные встанут в код автоматически;
  • изменить размеры видеоплеера отдельно по ширине и высоте.


Пользуйтесь здесь и на специальной странице сайта. Переходите. Сохраняйте в закладках.
На этом все. Если вставить видео на сайт не получается или есть пожелания по тексту статьи, пишите комментарии. Будем отвечать и дорабатывать.
Записки айтишника для каждого
Adblock
detector