Question

我的YouTube视频包含在以下div中：

<div id="playVideo" class="white-popup mfp-hide">
    <div class='embed-container'>
        <iframe id="video" src='https://www.youtube.com/embed/GYmW1u8YiQY?enablejsapi=1&version=3&playerapiid=ytplayer?rel=0' frameborder='0' allowfullscreen="true" allowscriptaccess="always"></iframe>
    </div>
</div>

按钮元素打开它：

    <div class="ghost-button float">
        <a href="#playVideo" id="playPop" class="open-popup-link" style="color:black; font-size:24px; letter-spacing:2px; font-family: 'Pathway Gothic One', sans-serif;" onclick="">WATCH TRAILER</a>
    </div>

它位于使用magnific pop库

创建的隐藏弹出窗口中

当用户点击打开弹出窗口时，我有以下javascript来播放视频：

    $('.open-popup-link').magnificPopup({
      type:'inline',
      midClick: true
    });

$(document).ready(function() {
        $('#playPop').on('click', function(ev){
            $('#video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');   
        });

        $('.closebtn').on('click', function(ev2){
            $('#video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');   
        });

        $('button .mfp-close').on('click', function(ev3){
            $('#video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');   
        });

    });

目前，关闭视频工作的按钮，但只有在用户手动点击播放后才能使用。当他们点击打开包含它的弹出窗口时，视频不会自动播放。如何在单击另一个按钮时单击并停止自动播放？

Answer 1

尝试将属性autoplay =“true”添加到链接源中，如下所示。

SRC = 'https://www.youtube.com/embed/GYmW1u8YiQY?autoplay=true&enablejsapi=1&version=3&playerapiid=ytplayer?rel=0'

在弹出窗口中播放/暂停YouTube视频

1 个答案: