Lightbox关闭时停止播放Youtube视频

Stop Playing Youtube Video When Lightbox Is Closed

本文关键字：播放 Youtube 视频 Lightbox      更新时间：2023-09-26

我正在创建一个灯箱，在没有插件的情况下从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按钮时，它会播放页面中的所有视频，而不仅仅是我点击的当前按钮。

这是Jsfidle的示例。HTML包含在中

尝试查看YouTube播放器API参考

下面，我将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以上代码停止视频。

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

是一种更简单的方法

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

这不是正确的吗？

相关文章：