Javascript 单击链接即可播放iframe视频

嗨，我想一个youtube视频弹出窗口打开时，用户点击我的网页上的特定链接。我一直在努力解决这个问题，但确实很挣扎。我确信这可以通过JQuery实现，但我不确定

HTML是

<div class="audiodemo">
<div class="audiodemoheader"> “Welcome to the Recovery Show, who's on   board?”</div>
<div class="audiodemolink"><a href="http://www.youtube.com/watch?v=kh29_SERH0Y?  rel=0" rel="prettyPhoto" class="demolink">Listen</a></div>

---

提前感谢

您可以使用放大弹出窗口来实现这一点。首先要包括必要的文件。我是从文档页面上得到的：

您最不需要做的就是在html中调用它

<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>

你可以随心所欲地设计它。如果您想查看更多示例，可以查看，因为它非常清楚地解释了所有内容。

使用引导：

HTML

“欢迎来到复原秀，谁在机上？”
&时代；
情态标题
...

JS

jQuery（'.demolink'）。打开（'click'，函数（evt）{
evt.preventDefault（）；
var youtubeLink=$（this.attr（'href'）.replace（'watch？v='，'embed/'）；
var html=''；
$（'.modal body'）.html（html）；
$（'#myModal'）.modal（）.on（'hide.bs.modal'，function（））{
$（'.modal body'）.html（''）；
})             
});

和引导文件：

---

我建议使用jquery插件，如：@pptaszek1990谢谢。我不太熟悉这一点，你能进一步帮助吗？如果你的站点上已经有一些引导样式，你也可以在引导框架中使用modal：（参见“实时演示”）

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 

<!-- jQuery 1.7.2+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>

$(document).ready(function() {
    $('.popup-youtube').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false
    });
});

<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>

<div class="audiodemo">
    <div class="audiodemoheader">“Welcome to the Recovery Show, who's on board?”</div>
    <div class="audiodemolink">
        <a href="http://www.youtube.com/watch?v=kh29_SERH0Y" rel="prettyPhoto" class="demolink">Listen</a>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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">Modal title</h4>
            </div>
            <div class="modal-body">
            ...
            </div>
       </div>
   </div>
</div>

jQuery('.demolink').on('click', function(evt){
    evt.preventDefault();
    var youtubeLink = $(this).attr('href').replace('watch?v=','embed/');
    var html = '<iframe width="620" height="320" src="'+ youtubeLink +'?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>';
    $('.modal-body').html(html);
    $('#myModal').modal().on('hide.bs.modal', function(){
        $('.modal-body').html('');    
    })             
});