Вставить на сайт видео с YouTube или другого хостинга достаточно просто, тем более вам предлагают для этого готовые коды. Поговорим о том, где их найти, как изменить и как вставить в статью только средствами HTML.
Начинаем с того, что идем на YouTube, через поиск находим и выбираем видеоролик, раскрывающий тему нашей статьи.
- Как найти подходящее видео для вставки на страницу своего сайта
- Где найти код видео для вставки
- Первый
- Второй путь
- Как вставить полученный код на страницу сайта
- Как изменить параметры показа видеоролика
- Как вставить или изменить другие дополнительные параметры
- Как задать время остановки ролика
- Как увеличить размер видеоплеера
- Размещаем видеоролик на странице сайта
- Как сделать тайм-код для размещенного в статье видеоролика
- Как вставить несколько видео в одну статью сайта (для темы Reboot и Root)
- Для трех видео в ряд
- Для шести видео в 2 ряда
- Важный элемент — дополнительный стиль в css
- Как еще проще установить видео с 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&autoplay=1&start=49” target=“raz” rel=“noopener”>00:00:49 Первая часть</a>
<a href=“//www.youtube.com/embed/p2k0Q-kQ3Ao?rel=0&autoplay=1&start=80” target=“raz” rel=“noopener”>00:01:20 Вторая часть</a>
<a href=“//www.youtube.com/embed/p2k0Q-kQ3Ao?rel=0&autoplay=1&start=163&end=176” target=“raz” rel=“noopener”>00:02:43 Третья часть</a>
</div>
Если отображается некорректно — смотрите скриншот:
Как вставить несколько видео в одну статью сайта (для темы Reboot и Root)
Иногда может потребоваться добавить несколько видео в статью. И чтобы видеоролики не выстраивались последовательно друг за другом (к сожалению, в смартфоне их расположение так и остается последовательным), а вставали компактно. Например, вот так:
Предлагаем использовать следующий код:
Для трех видео в ряд
<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>. Смотрите в спойлере:
<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.
Добавить его не составит труда. Нужно в консоли сайта перейти: Внешний вид → Настройки → Дополнительные стили. И вставить предложенный ниже текст.
Разворачивайте спойлер и копируйте.
.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 совершенно любую ссылку, даже из поисковой строки браузера, и преобразовать ее одним кликом мыши в необходимый <iframe>;
- легко установить время начала и окончания ролика без пересчета в секунды, при этом данные встанут в код автоматически;
- изменить размеры видеоплеера отдельно по ширине и высоте.
Отлично! Получилось. Спасибо за статью.
Статьи полезные. Я извлёк пользу. Спасибо!
Отцентровал плеер, всё получилось. Спасибо за инструкцию. Всё доходчиво.
Спасибо! Очень понравилась статья.
Спасибо! Ваш сайт замечательный! Теперь знаю где искать ответы на свои вопросы!
Спасибо! Простыми словами, пошагово, всё понятно. Круто!
А видео на сайте как-то влияет на скорость загрузки сайта? Гугл отслеживает загрузку страниц.
Видео на свой сайт загружать вообще не рекомендуется. Поместите его на любой из видеохостингов: YouTube, Vimeo, VK, Rutube или другой. На сайте размещайте только ссылку. И на скорости это не отразится.
Очень нужный, полезный контент! Молодой, грамотный сайт, попутного ветра!
Спасибо вам огромное!
Спасибо за стать, актуальна прямо сейчас.
Сайт просто кладезь полезных знаний, добавлю пожалуй в закладки. Спасибо автору.
Полезная инфа. беру в закладки!
Полезный сайт, всё очень понятно. Спасибо!
Отличная статья! Очень полезно пригодились советы так как веду собственный сайт!
Круто! Я думал, что можно просто вставить ссылку на сайт на видео с ютуб канала, а оказывается ещё огромное количество фишек есть. Теперь буду использовать на своём сайте. Ребят всем советую данный сайт! Спасибо автору.
Спасибо, очень лестный комментарий
Спасибо. Ценная информация