Как сделать кнопку включения/выключения звука для Youtube видео?

Для создания кнопки включения/выключения звука для YouTube видео вам понадобится использовать JavaScript в сочетании с YouTube API.

Первым шагом будет подключение YouTube API к вашему проекту. Для этого вам нужно получить API ключ YouTube и добавить его в ваш проект. Затем подключите библиотеку YouTube API с помощью следующей строки кода:

<script src="https://www.youtube.com/iframe_api"></script>

Далее необходимо создать HTML-разметку для плеера YouTube и кнопки включения/выключения звука:

<div id="player"></div>
<button id="toggle-sound">Включить/Выключить звук</button>

Затем добавьте следующий JavaScript-код, который будет управлять воспроизведением и звуком видео:

// Переменная, содержащая ID видео на YouTube
var videoId = 'YOUR_VIDEO_ID';

// Переменная, содержащая состояние звука (вкл/выкл)
var isMuted = false;

// Функция загрузки плеера YouTube
function onYouTubeIframeAPIReady() {
    // Создание плеера YouTube
    var player = new YT.Player('player', {
        videoId: videoId,
        playerVars: {
            origin: window.location.origin,
            mute: 1 // Включение автоматического заглушения звука при загрузке
        },
        events: {
            'onReady': onPlayerReady
        }
    });
}

// Функция, вызываемая когда плеер готов
function onPlayerReady() {
    // Получение кнопки и добавление обработчика события на клик
    var toggleButton = document.getElementById('toggle-sound');
    toggleButton.addEventListener('click', function () {
        if (isMuted) {
            player.unMute(); // Включение звука
            isMuted = false;
            toggleButton.textContent = 'Выключить звук';
        } else {
            player.mute(); // Выключение звука
            isMuted = true;
            toggleButton.textContent = 'Включить звук';
        }
    });
}

В этом примере, мы создаем плеер YouTube с помощью YT.Player и устанавливаем ID видео в переменной videoId. Мы также устанавливаем значение mute в 1 в параметрах плеера для загрузки видео с отключенным звуком.

При нажатии на кнопку toggle-sound, мы проверяем состояние звука с помощью переменной isMuted, и включаем или выключаем звук плеера YouTube с помощью методов player.mute() и player.unMute() соответственно. В то же время, мы также обновляем текст кнопки.

Наконец, вызовите функцию onYouTubeIframeAPIReady() для инициализации плеера YouTube и добавления обработчика события, который будет вызывать функцию onPlayerReady().

Это весь процесс создания кнопки включения/выключения звука для YouTube видео с использованием JavaScript и YouTube API.