关闭灯箱时停止播放 Youtube 视频答案

【问题标题】：Stop Playing Youtube Video When Lightbox Is Closed关闭灯箱时停止播放 Youtube 视频
【发布时间】：2015-04-04 02:54:22
【问题描述】：

我正在创建一个灯箱，以便在没有插件的情况下播放来自 youtube 的视频，到目前为止一切顺利，但现在我遇到了一个问题，我不知道如何让 youtube 视频在灯箱时停止播放已关闭，这是代码

//triggering or close the lightbox
$( '#overlay, #close').on('click', function(event) {
    $("#lightbox, #overlay").hide();
});

$( '#show').on('click', function(event) {
    $("#lightbox, #overlay").show();
});


// This loads the iframe only on click on the Lightbox Button
var iframes = $('iframe');

$('.show').click(function() {
    iframes.attr('src', function() {
        return $(this).data('src');
    });
});

iframes.each(function() {
    var src = $(this).attr('src');
    $(this).data('src', src).attr('src', '');
});

我也不知道如何只播放我单击的按钮中的视频，因为现在当我单击Show lightbox 按钮时，它正在播放页面中的所有视频，而不仅仅是当前页面中的视频我点击的按钮。

这里是 Jsfiddle exemple。 HTML 包含在其中

【问题讨论】：

标签： javascript jquery html video youtube

【解决方案1】：

试试看YouTube Player API Reference

下面我将 API 参考中的示例代码合并到您的 JSFiddle 示例的修改版本中：

<html>
  <head>

    <style>
        /* CSS styles removed for brevity */
    </style>

  </head>

  <body>
    <div class="left">
    <button class="show">Show lightbox</button>

    <!-- LIGHTBOX CODE BEGIN -->
    <div id="lightbox" class="lightbox" style="display:none">
        <div class="white_content">
            <a href="javascript:;" id="close">Close</a>
            <p>Click anywhere to close the lightbox.</p>
            <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
            <div id="player"></div>
        </div>
    </div>

    <div id="overlay" style="display:none">
      <!-- LIGHTBOX CODE END -->
    </div>

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script>
        $( '#overlay, #close').on('click', function(event) {
            $("#lightbox, #overlay").hide();
            player.stopVideo();
        });

        $( '.show').on('click', function(event) {
            $("#lightbox, #overlay").show();    
            player.seekTo(0, false);
            player.playVideo();
        });

        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;
        function onYouTubeIframeAPIReady() {
          player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
          });
        }

        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) { }

        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        function onPlayerStateChange(event) { }
    </script>
  </body>
</html>

利用 API 上面的代码在灯箱关闭时停止视频。

注意：我删除了第二个按钮以保持代码示例简单。

【讨论】：

感谢@between_compiles，但我在我的 Jsfiddle 上试过了，但它似乎不起作用......

【解决方案2】：

一个更简单的方法是

$(player-selector).on("click", function()
{
   $(this).html("").hide();
}

这不正确吗？

【讨论】：