Как на сайте включить звук у видео Ютуб при наведении мышью?

Question

[Elena_11]

На сайте добавлено видео с Ютуб через iframe, у которого задано автовоспроизведение, но оно возможно только при выключенном звуке. Как активировать звук при наведении мышью, чтобы когда пользователь доскроллил до блока с видео (видео на всю ширину блока, как видео-фон), звук автоматически включался при попадании курсора на блок? Либо вариант включения звука через кнопку. Как реализовать?

<div class="videoWrapper">
<iframe width="100%" height="100%" style="width: 100%;height: 100%;position: absolute;top: 0;"src="https://www.youtube.com/embed/LXb3EKWsInQ?enablejsapi=1&autoplay=1&controls=0&rel=0&showinfo=0&loop=1&modestbranding=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Comments

[Виталий Першин]

В фрейме никак, разве что вставлять фрейм уже после того как пользователь доскролит до нужного места и сделает все необходимые действия для автозапуска со звуком.

[maksam07]

Если видео не планируется менять часто, то проще выкачать его с ютуба и другими средствами встроить на сайт

Answer 1

[Theqone]

Получилось сделать с помощью YouTube Player API. Звук видео включается при наведении мышкой на видео, но с условием если пользователь до этого кликнет один раз в любое место на странице(можно даже на сам фон с видео). Не разобрался почему так получается, может у тебя получится что-то сделать с этим.

iframe {
                pointer-events: none;
            }

<div id="videoWrapper" style="height: 1080px;">
            <div id="player"></div>
        </div>

var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    height: '100%',
                    width: '100%',
                    videoId: 'LXb3EKWsInQ',
                    events: {
                        'onReady': onPlayerReady,
                    }
                });
                document.getElementById('player').src = 'https://www.youtube.com/embed/LXb3EKWsInQ?enablejsapi=1&widgetid=1&autoplay=1&loop=1&playlist=LXb3EKWsInQ';


            }
            function onPlayerReady(event) {

                player.setVolume(0);
                player.playVideo();
                let videoWrapper = document.getElementById('videoWrapper');
                videoWrapper.addEventListener('pointerenter', () => {
                    player.setVolume(100);
                });
                videoWrapper.addEventListener('pointerout', () => {
                    player.setVolume(0);
                    player.playVideo();
                });
            }