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

Question

我正在创建一个灯箱来在没有插件的情况下播放来自 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包含在里面

Answer 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 以上代码在灯箱关闭时停止视频。

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

Answer 2

更简单的方法是

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

对不对？

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

Stop Playing Youtube Video When Lightbox Is Closed

html

javascript

youtube

video

jquery