1

標準のYoutubeiframeコードを使用していくつかの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はデフォルトで非表示になっていますが、リンクをクリックすると、ビデオがjQueryUIモーダルウィンドウに表示されます。

1ページに複数の動画があります。

どんな方向でも大歓迎です。

4

1 に答える 1

4

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>
于 2012-04-30T19:17:23.250 に答える