Autoplay YouTube iframe API в перьевом свете после открытия - PullRequest
Новая
       20

Autoplay YouTube iframe API в перьевом свете после открытия

0 голосов
/ 16 марта 2020

Я пытаюсь автоматически воспроизвести видео на YouTube в моем моде Featherlight. Но когда я попытался вызвать всплывающее окно, аудио воспроизводится в фоновом режиме, но видео все еще заморожено. Опять же, нет другого экземпляра этого видео. Он уникален, и в DOM есть только один элемент. Ниже мой HTML код 

 <a href="#" target-url="#video-lightbox-demo2" class="video_player">Open</a>

<div id="video-lightbox-demo2" class="lightbox"> 
    <div class="video-container player" id="player" name="player"></div>
</div>

<script>
    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: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE'
        });
    }

</script>

Теперь в моем скрипте у меня есть это 

    $('.video_player').featherlight({
        targetAttr: 'target-url',
        beforeOpen: function (event) {
            alert("Before open triggered");
        },
        afterOpen: function (event) {
            player.playVideo();
        }
    });

Но когда код player.playVideo() выполняется при воспроизведении видео на заднем плане. Вы можете здесь аудио играть на заднем плане. Затем, когда я играю реальное видео во всплывающем окне, оно воспроизводит звук в другом случае. Похоже, в DOM есть 2 видео. Что невозможно, потому что когда я просматриваю исходный код страницы, он возвращает только 1 экземпляр.

Как мне автоматически воспроизвести реальное видео во всплывающем окне? Потому что, если я использую переменную player, она не воспроизводит видео во всплывающем окне

...