Javascript 在jQuery模式对话框中添加tube播放器（iFrame）

我在我的

HTML

中有一些图像，我需要在点击每个图像时播放嵌入式YouTube视频，这些图像应该在一个窗口中加载/播放。基本上就像一个弹出式视频播放器。

$('#ImagesBlock .playVideo').click(function(){
    var myId = $(this).attr('data-videoId');
    '@ViewBag.VideoId' = myId;
    $('#MyVideoPlayer').dialog(
        { width: 'auto' },
        { height: 'auto' },
        { draggable: false },
        { resizable: false },
        { closeOnEscape: false },
        { modal: true },
        { show: { effect: "fade", duration: 200} }
    });       
});

$('#imagesBlock .playVideo').click(function(){
    var myId = $(this).attr('data-videoId');

    var src = 'https://www.youtube.com/embed/'+ myId +'?wmode=opaque&autoplay=1&autohide=1
        &showinfo=0&controls=2&rel=0&enablejsapi=1';

    $('#MyVideoPlayeriframe').attr('src', src);     
    $('#MyVideoPlayer').dialog(
        { width: 'auto' },
        { height: 'auto' },
        { draggable: false },
        { resizable: false },
        { closeOnEscape: false },
        { modal: true },
        { show: { effect: "fade", duration: 200} }
    });        
});

下面是我为播放/附加每个图像的视频所做的工作。我有三张图像，我在我的自定义

数据属性

中添加了唯一的视频id，这是我从YouTube中获取的

HTML 2。每次对话框都为更新后的

iFrame

src分配新的视频id 打开。

$('#ImagesBlock .playVideo').click(function(){
    var myId = $(this).attr('data-videoId');
    '@ViewBag.VideoId' = myId;
    $('#MyVideoPlayer').dialog(
        { width: 'auto' },
        { height: 'auto' },
        { draggable: false },
        { resizable: false },
        { closeOnEscape: false },
        { modal: true },
        { show: { effect: "fade", duration: 200} }
    });       
});

$('#imagesBlock .playVideo').click(function(){
    var myId = $(this).attr('data-videoId');

    var src = 'https://www.youtube.com/embed/'+ myId +'?wmode=opaque&autoplay=1&autohide=1
        &showinfo=0&controls=2&rel=0&enablejsapi=1';

    $('#MyVideoPlayeriframe').attr('src', src);     
    $('#MyVideoPlayer').dialog(
        { width: 'auto' },
        { height: 'auto' },
        { draggable: false },
        { resizable: false },
        { closeOnEscape: false },
        { modal: true },
        { show: { effect: "fade", duration: 200} }
    });        
});

我应该和哪一个一起去。不过我找到了一些参考资料

---

有没有什么方法可以让它在将来更加简化和可重用。请给出明智的建议。

我更新这个线程有点晚了，但我还是设法创建了一个或多个插件的方法。这是一个很好的链接

我已经为视频标题和视频id使用了自定义HTML。这将保持HTML的干净性和语义。当然，您可以相应地设置/自定义弹出窗口的样式

请访问以查看此操作