jquery - 模态窗口中的 YouTube 播放器

Question

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

两个问题:1)YouTube 是否有办法将 native 嵌入到模态窗口中？ 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&showinfo=0&modestbranding=1&autoplay=1&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

Answer 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);