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

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

<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>;
  • легко установить время начала и окончания ролика без пересчета в секунды, при этом данные встанут в код автоматически;
  • изменить размеры видеоплеера отдельно по ширине и высоте.


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

Нажимая кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. Сергей

    Отлично! Получилось. Спасибо за статью.

    Ответить
  2. Юрий

    Статьи полезные. Я извлёк пользу. Спасибо!

    Ответить
  3. Сергей

    Отцентровал плеер, всё получилось. Спасибо за инструкцию. Всё доходчиво.

    Ответить
  4. Юрий

    Спасибо! Очень понравилась статья.

    Ответить
  5. Юрий

    Спасибо! Ваш сайт замечательный! Теперь знаю где искать ответы на свои вопросы!

    Ответить
  6. Леонид

    Спасибо! Простыми словами, пошагово, всё понятно. Круто!

    Ответить
  7. Татьяна

    А видео на сайте как-то влияет на скорость загрузки сайта? Гугл отслеживает загрузку страниц.

    Ответить
    1. znatok автор

      Видео на свой сайт загружать вообще не рекомендуется. Поместите его на любой из видеохостингов: YouTube, Vimeo, VK, Rutube или другой. На сайте размещайте только ссылку. И на скорости это не отразится.

      Ответить
  8. Юлия

    Очень нужный, полезный контент! Молодой, грамотный сайт, попутного ветра!

    Ответить
    1. znatok автор

      Спасибо вам огромное!

      Ответить
  9. Павел

    Спасибо за стать, актуальна прямо сейчас.

    Ответить
  10. Сергей

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

    Ответить
  11. олег

    Полезная инфа. беру в закладки!

    Ответить
  12. Ирина

    Полезный сайт, всё очень понятно. Спасибо!

    Ответить
  13. Павел Лейкин

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

    Ответить
  14. Павел

    Круто! Я думал, что можно просто вставить ссылку на сайт на видео с ютуб канала, а оказывается ещё огромное количество фишек есть. Теперь буду использовать на своём сайте. Ребят всем советую данный сайт! Спасибо автору.

    Ответить
    1. znatok автор

      Спасибо, очень лестный комментарий

      Ответить
  15. Николай

    Спасибо. Ценная информация

    Ответить