Question

I have a site that will have several Youtube videos embedded using the standard Youtube iframe code.

I would like for these to be triggered via text link such as:

<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>

Where the iframe is hidden by default but when the link is clicked the video shows in a jQuery UI modal window.

There will be multiple videos on a page.

Any direction is appreciated.

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>