Как встроить

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

Вставить видео с YouTube на свой веб-сайт легко. Вам просто нужно скопировать код внедрения IFRAME и вставить его в любое место на своей веб-странице. YouTube предлагает базовые параметры настройки — например, вы можете изменить размеры проигрывателя или скрыть брендинг YouTube — но если вы хотите иметь больший контроль над макетом или поведением встроенного проигрывателя, вам подойдет YouTube Player API.
В этом руководстве объясняется, как встроить видео YouTube, которое будет автоматически воспроизводиться при загрузке веб-страницы, но с отключенным звуком.
Например, веб-сайт продуктов может использовать короткие скринкасты для выделения функций, и эти видео будут автоматически воспроизводиться при загрузке страницы. Однако для громкости установлено значение 0, и пользователь может вручную щелкнуть, чтобы включить звук в видео. Точно так же, если вы используете видеофоны YouTube, имеет смысл встраивать видео с отключенным звуком, которые запускаются в цикле.

Встроить проигрыватель YouTube с автоматическим воспроизведением и отключением звука

См. Демонстрационную страницу, чтобы получить представление о том, что мы пытаемся здесь сделать. Страница загружается, видео воспроизводится, но со звуком слайд полностью опущен.
Это легко. Перейдите на страницу видео YouTube и запишите идентификатор видео из URL-адреса. Например, если ссылка на видео YouTube — https://youtube.com/watch?v=xyz идентификатор видео YouTube — xyz После того, как у вас есть идентификатор, все, что вам нужно сделать, это заменить YOUR_VIDEO_ID в следующем коде на эту строку.
<div id="muteYouTubeVideoPlayer">div>
<script async src="https://www.youtube.com/iframe_api">script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('muteYouTubeVideoPlayer', {
videoId: 'YOUR_VIDEO_ID', // YouTube Video ID
width: 560, // Player width (in px)
height: 316, // Player height (in px)
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 1, // Show pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 1, // Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Hide the full screen button
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 0 // Hide video controls when playing
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
// Written by @labnol
script>

Далее Поместите отредактированный код на вашей веб-странице, а встроенное видео автоматически воспроизводится, но звук приглушен.
Вы можете дополнительно настроить проигрыватель, изменив различные переменные проигрывателя, как указано в коде. Например, если вы установите для loop значение 1, видео будет воспроизводиться в цикле. Установите для fs значение 1, чтобы отображалась кнопка полноэкранного режима внутри видеопроигрывателя. Внутри проигрыватель встроен с помощью YouTube IFRAME API. Когда страница загружается, запускается событие onReady, отключающее видео.