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

Автор: Аверьянов Михаил. Опубликовано в Разное

Стандартный YouTube вариант:

<iframe src="https://www.youtube.com/embed/TtPQFNEyB2Q" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Идеальный YouTube вариант для сайта и блога:

<p style="text-align: center;">ВЗРОСЛЫЕ ДЕТИ<br /><iframe src="https://www.youtube.com/embed/_lpLedUvaSI?modestbranding=1;rel=0;autohide=1;controls=2;" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

<p>19.02.2018 инфо война Дмитрий Таран<br /><iframe src="https://www.youtube.com/embed/Yl0xLATLUoE?modestbranding=1;rel=0;autohide=1;controls=2;" width="100%" height="720" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

19.02.2018 инфо война Дмитрий Таран

  • modestbranding=1 - Скрываю логотип YouTube который внизу справа
  • rel=0; - Не показывать похожие видео по окончании просмотра
  • autohide=1; - Обе панели (управления и инфо) пропадают, если убрать курсор мыши с области видеоплеера
  • controls=2; - Пропадают иконки Посмотреть позже и поделиться
  • frameborder="0" - Убирает рамку в 1px вокруг видео
  • allowfullscreen - Разрешение на разворот видео на весь экран (как по умолчанию)

При очередной вставке видео на сайт в этом коде меняется только, то что выделено жирным.
<iframe src="https://www.youtube.com/embed/TtPQFNEyB2Q?modestbranding=1;rel=0;autohide=1;controls=2;" frameborder="0" allowfullscreen></iframe>

Например у этого видео адрес - https://www.youtube.com/watch?v=TtPQFNEyB2Q Всё, что после watch?v=TtPQFNEyB2Q Это и и нужно менять.
Если есть ? и ещё, что-то TtPQFNEyB2Q?t=7s это не нужно. ?t=7s - означает, что видео будет воспроизводиться с 7 секунды.
При нажатии на поделиться на сайте ютуб, есть короткая ссылка https://youtu.be/TtPQFNEyB2Q, тут точно также нужно знать идентификатор ютуб видео.

Если нужно, чтобы видео было большое, например 640px на 360px, то:
<iframe src="https://www.youtube.com/embed/TtPQFNEyB2Q?modestbranding=1;rel=0;autohide=1;controls=2;" frameborder="0" width="640" height="360" allowfullscreen></iframe>

Добавить комментарий

Защитный код
Обновить