模态窗口中的 YouTube 播放器答案

【问题标题】：YouTube player in modal window模态窗口中的 YouTube 播放器
【发布时间】：2019-01-24 19:03:21
【问题描述】：

我希望我的页面以模态形式显示 div，然后播放 YouTube 视频。我能够按预期播放视频（下面的代码），但是当我在过滤操作时切换到隐藏的 div 时，页面加载时隐藏的 div 不会将 data-src 值传递给模态。我尝试通过 jQuery 分离模态并执行 insertAfter() 但 Bootstrap 模态保持相同的 data-src 值。

两个问题：1) YouTube 是否有办法将本机嵌入到模态窗口中？ 2) 关于 DOM 以及它如何保留我传递给模式的初始 data-src 值，我缺少什么？

链接的HTML（点击）：

<div class="video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/Sa_5fh_OFcc" data-target="#myModal">Overview</div>
<div class="video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/TBCyYTNBObI" data-target="#myModal">Installation Instructions</div>

模态窗口的 HTML：

<!-- Modal for video-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>        
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" type="text/html" width="640" height="390" src="" id="video"   frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>

jQuery 获取 data-src 值（YouTube 链接）并创建视频对象

$('.video-btn').click(function()
{
$videoSrc = $(".video-btn").data( "src" );
});

JavaScript/jQuery 打开模态并播放视频：

    // when the modal is opened autoplay it  
    $('#myModal').on('shown.bs.modal', function (e)
    {
        // set the video src to autoplay and not to show related video. 
        console.log($("#video").attr('src',$videoSrc));

        //$("#video").attr('src',$videoSrc + "?rel=0&amp;showinfo=0&amp;modestbranding=1&amp;autoplay=1&amp;controls=0&amp'enablejsapi=1" ); 
    });//#myModal show

    // stop playing the youtube video when I close the modal
    $('#myModal').on('hide.bs.modal', function (e)
    {
        // a poor man's stop video
        $("#video").attr('src',$videoSrc); 
        //remove modal from DOM
        //$("#myModal").detach();
    });//#myModal close

【问题讨论】：

标签： jquery twitter-bootstrap youtube modal-dialog

【解决方案1】：

试试这个插件https://sorgalla.com/lity/。使用非常简单

<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube</a>

然后添加这个脚本。

var lightbox = lity('//www.youtube.com/watch?v=XSGBVzeBUbk');
$(document).on('click', '[data-lightbox]', lity);

【讨论】：

易于使用。效果很好。
很高兴有帮助