jquery-ui - 单击时通过 jQuery UI 模式打开任何视频？

Question

我有一个使用标准 Youtube iframe 代码嵌入多个 Youtube 视频的网站。

我希望通过文本链接触发这些，例如：

<p><a href="#" class="youtubevideo">Click Here</a> to watch a puppy do something.</p>

<iframe width="420" height="315" src="http://www.youtube.com/embed/1AH9VEM_qC0?rel=0" frameborder="0" allowfullscreen></iframe>

默认情况下隐藏 iframe，但单击链接时，视频会显示在 jQuery UI 模态窗口中。

一个页面上会有多个视频。

任何方向表示赞赏。

Answer 1

jsfiddle：http: //jsfiddle.net/2Ur9M/38/

<div id="vid1" class="play">vid1</div>
<div id="vid2" class="play">vid2</div>
<div id="vid3" class="play">vid3</div>

<div id="ifvid1" style="display:none">1<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe></div>
<div id="ifvid2" style="display:none">2<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe></div>
<div id="ifvid3" style="display:none">3<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe></div>

<script>
    $(function()
    {
        $(".play").each( function( index )
        {
            $(this).click( function()
            {
                $("#if"+$(this).attr("id")).dialog(
                {
                    modal: true
                });
            });
        });
    });
</script>