Jquery 模态窗口中的YouTube播放器

我想让我的页面显示一个div作为模态，然后播放一个YouTube视频。我能够按预期播放视频（下面的代码），但当我在过滤操作时切换到隐藏的div时，页面加载时隐藏的div不会将数据src值传递给模式。我尝试过通过jQuery分离模式并执行insertAfter（），但引导模式保留相同的数据src值

两个问题：1）YouTube是否有一种方法可以嵌入到模式窗口中？2） 关于DOM，我遗漏了什么，以及它是如何保持传递给modal的初始数据src值的

链接的HTML（单击）：

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

试试这个插件。使用非常简单

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

---

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

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

    // 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

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