Как вставить YouTube видео с выключенным звуком: код

Быстрый ответ

Этот код позволит автоматически воспроизводить встроиваемое видео с YouTube без звука, путем добавления параметра &mute=1 к URL.

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1" allow="autoplay" style="width:100%;height:auto;"></iframe>

Не забывайте заменять VIDEO_ID на идентификатор нужного вам видео.

Завершение

Встроиваемое видео из YouTube, воспроизводимое без звука, может существенно улучшить пользовательский опыт на вашем сайте. Легко отключить звук, добавив параметр &mute=1 к URL видео. Для более детальной настройки звука вы можете использовать YouTube IFrame API.

Отключение звука через параметры URL

Добавьте параметр &mute=1 к URL при вставке кода iframe, чтобы видео воспроизводилось без звука. Пример кода:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?mute=1" style="width:100%;height:auto;"></iframe>

Подробнее об этом расскажет наш спикер на видео

Динамическое управление звуком через YouTube IFrame API

Для более гибкого управления звуком используйте YouTube IFrame API, которое позволяет программно отключить звук с помощью функции mute, после загрузки видео. Пример JavaScript кода:

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    videoId: 'VIDEO_ID',
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  event.target.mute();
}

Как подключить данный JavaScript к HTML:

<div id="player"></div>

Автоматическое воспроизведение видео на "молчанке"

Чтобы видео начинало проигрываться сразу после загрузки страницы, используйте параметры autoplay=1&mute=1. Это также поможет учесть требования некоторых браузеров к автовоспроизведению видео.

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1" allow="autoplay" style="width:100%;height:auto;"></iframe>

Визуализация

Вот пример, который демонстрирует, что происходит с видео из YouTube при добавлении параметра &mute=1:

Код для встраивания:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?mute=1" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Видео без отключения звука: 📺🔊 (с звуком) Видео с отключенным звуком: 📺🔇 (без звука)

Полезные материалы

1. Официальная документация YouTube IFrame Player API — инструкция по API плеера YouTube для встраивания через iframe.
2. Встраивание видео YouTube в HTML — подробное пошаговое руководство по добавлению видео YouTube на веб-страницы.
3. Атрибуты autoplay и muted в HTML DOM — методы управления автовоспроизведением и звуком в медиа элементах.
4. Политика Chrome относительно автовоспроизведения видео — информация о правилах автовоспроизведения в браузере Chrome.
5. Создание кнопок play и pause для видео на YouTube и Vimeo через API — обширная статья о контроле видео через JavaScript с помощью API.
6. Тестовый проигрыватель YouTube — страница для тестирования настроек проигрывателя YouTube.