Как управлять 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

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

- Создание сайтов на 1С-Битрикс любой сложности
- Вёрстка макетов Figma, Photoshop, Zeplin
- Поддержка проектов на Битриксе
- Разработка нового функционала для сайта
- Парсинг данных
- Выгрузка из файлов в формате XML, YML, XLS, XLSX, CSV, JSON
- Интеграция по API со сторонними сервисами
и многое другое

E-mail: dmitriyribka@gmail.com

Один комментарий

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *