點擊時通過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>