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

Пройдите тест, узнайте какой профессии подходите
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

HTML
Скопировать код
<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, чтобы видео воспроизводилось без звука. Пример кода:

HTML
Скопировать код
<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 кода:

JS
Скопировать код
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    videoId: 'VIDEO_ID',
    events: {
      'onReady': onPlayerReady
    }
  });
}

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

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

HTML
Скопировать код
<div id="player"></div>

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

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

HTML
Скопировать код
<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1" allow="autoplay" style="width:100%;height:auto;"></iframe>

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

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

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

HTML
Скопировать код
<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.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой параметр необходимо добавить к URL, чтобы видео YouTube воспроизводилось без звука?
1 / 5