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

【问题标题】：Play/Pause YouTube video in Pop Up在弹出窗口中播放/暂停 YouTube 视频
【发布时间】：2017-02-13 20:19:38
【问题描述】：

我的 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":""}', '*');   
        });

    });

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

【问题讨论】：

标签： javascript jquery html youtube magnific-popup

【解决方案1】：

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

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

【讨论】：

在 URL 中设置 autoplay true 属性的问题是，当我关闭按钮时它会隐藏视频，但元素仍然存在，并且基本上重新加载并从头开始播放。我需要以某种方式暂停或停止它，或者杀死 DOM 对象并找到重新加载它的方法。如果我能提供帮助，尽量避免使用 youtube API。