Чтобы добавить кнопку включения/выключения звука для YouTube видео, вам потребуется использовать YouTube Player API. Этот API позволяет вам контролировать воспроизведение, управлять громкостью и другими параметрами видео.
Вот пример кода, который добавляет кнопку включения/выключения звука для вставленного через iframe YouTube видео:
1. Вставьте следующий HTML код на нужное место на странице:
```html
<div id="player"></div>
<button id="muteButton">Включить/Выключить звук</button>
```
2. Добавьте следующий JavaScript код в верхнюю часть страницы или внешний .js файл:
```javascript
// 1. Создайте переменные для хранения плеера и кнопки
var player;
var muteButton = document.getElementById("muteButton");
// 2. Загрузите iframe API YouTube
function onYouTubeIframeAPIReady() {
// 3. Создайте новый плеер, указав id элемента div, в котором будет отображаться видео
player = new YT.Player("player", {
events: {
onReady: onPlayerReady
}
});
}
function onPlayerReady(event) {
// 4. Добавьте обработчик события клика на кнопке включения/выключения звука
muteButton.addEventListener("click", function() {
// 5. Получите текущую громкость плеера
var volume = player.getVolume();
// 6. Если громкость больше 0, выключите звук, иначе включите его
if (volume > 0) {
player.mute();
muteButton.innerHTML = "Включить звук";
} else {
player.unMute();
muteButton.innerHTML = "Выключить звук";
}
});
}
```
3. Добавьте следующий JavaScript код после предыдущего:
```javascript
// 7. Загрузите YouTube iFrame API
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
```
Обратите внимание, что для использования YouTube Player API вам нужно будет зарегистрировать свое приложение на консоли разработчика Google и получить API-ключ. Подробнее о регистрации приложения и получении ключа можно узнать в официальной документации YouTube API.