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>

点击后通过jQuery UI模式打开任何视频？

1 个答案: