在模式关闭时停止 YouTube 视频 - 在 AJAX 加载后答案

【问题标题】：Stop YouTube video on modal close - after AJAX load在模式关闭时停止 YouTube 视频 - 在 AJAX 加载后
【发布时间】：2023-03-20 02:47:02
【问题描述】：

我有一个小脚本，可以在 YouTube 视频的模态关闭后停止播放。问题是如果 HTML 是通过 AJAX 加载的，它就不起作用。

脚本：

$('#panelModal-1').on('hidden.bs.modal', function () {
    callPlayer('yt-player-1', 'stopVideo');
});
$('#panelModal-2').on('hidden.bs.modal', function () {
    callPlayer('yt-player-2', 'stopVideo');
});

HTML（大括号表示从 CMS 中提取的数据）：

<li>
  <a href="#" title="Watch Video" data-toggle="modal" data-target="#panelModal-{count}">
    <div class="video-background" style="background-image:url(http://img.youtube.com/vi/{video_youtube_id}/hqdefault.jpg)"></div>
    <div class="video-details">
      <h4>{title}</h4>
      <p>{video_subtitle}</p>
    </div>
  </a>
  <!-- Modal -->
  <div class="modal fade" id="panelModal-{count}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-{count}">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel-{count}">{title}</h4>
        </div>
        <div class="modal-body">
          <div id="yt-player-{count}" class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{video_youtube_id}?enablejsapi=1"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>

AJAX 部分是这样的：

    $(document).ready(function()
    {
    $('.sub-nav').delegate('.load-case-studies', 'click', function(e)
    {
        // Don't follow the link
        e.preventDefault();

        $('.sub-nav a').removeClass('active');
        $(this).addClass('active');

        // Fetch the next page
        $.get($(this).attr('href'), function(data)
        {                                           
            // Only grab the part of the page we want
            content = $(data).find('.ajax-wrapper').hide();

            // Add it to the DOM
            $(content).replaceAll('#entry-container');

            // Fade-in our new content
            $(content).fadeIn('fast');
        });
    });
});

如果数据已通过 AJAX 加载，如何在模式关闭后停止播放视频？

【问题讨论】：

标签： javascript jquery ajax youtube

【解决方案1】：

您可以使用以下 jQuery 命令。

$('#playerID').get(0).stopVideo();

如果您使用 Player API：

var player = new YT.Player('player');    
player.stopVideo();

【讨论】：