Как управлять Youtube при помощи HTML

В данной статье вы узнаете какие опции мы можем использовать на своих сайтах при вставке видеороликов с YouTube.

Как вставить видеоролик с YouTube на страницу сайта?

Начнем с основ. На странице нужного ролика нужно нажить
1. Поделиться
2. Нажать кнопку Встроить
3. Скопировать появившейся код на свою страницу

В моем случае этот код выглядит так:

<iframe width="560" height="315" src="https://www.youtube.com/embed/SLsTskih7_I" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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

Сделать это можно как правило в том же окне, где вы и копировали код.
1. Отмечаете галочку
2. Выбираете время старта
3. Видим что в коде добавляется ?start=100. Т.к. это в секундах, то реальное время 1:40

Это значит что в коде появляется параметр и наша ссылка выглядит теперь так:
https://www.youtube.com/embed/SLsTskih7_I?start=100

Как сделать авто-воспроизведение роликов Youtube и убрать звук в HTML?

Для этого будем использовать код из примеров выше. Показывать буду на примере ссылки, для которой и необходимо будет добавить параметры:
https://www.youtube.com/embed/SLsTskih7_I?autoplay=1&mute=1
autoplay – включает автовоспроизведение. единица тут служит как true – а значит “истина” в программировании.
mute – соответственно выключает звук, всё просто 🙂

Как в ютуб ролике убрать кнопки?

Для этого мы добавляем такой параметр как controls=0. Чтобы дописать его, используйте знак амперсанда, или же &
https://www.youtube.com/embed/SLsTskih7_I?autoplay=1&mute=1&controls=0

Но, если это будет единственный параметр, то наша ссылка будет выглядеть так:
https://www.youtube.com/embed/SLsTskih7_I?controls=0
Связано это с тем, что все параметры начинаются со знака вопрос, а если их несколько – используется амперсанд.

Кстати именно поэтому в браузере, когда вы смотрите видеоролик c ютуба, там есть не только параметр самого видео:
?v=UceaB4D0jpo
но и иногда &playlist=… 🙂

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

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