Открыть любое видео через jQuery UI modal on click?

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>