클릭 할 때 jQuery UI 모달을 통해 모든 비디오를여시겠습니까?

Question

표준 YouTube iframe 코드를 사용하여 여러 개의 YouTube 동영상을 퍼갈 사이트가 있습니다. 나는이에 대한 싶습니다

은 같은 텍스트 링크를 통해 트리거 될 :

iframe을 기본적으로 숨겨져 있지만 링크를 클릭하면 비디오가 jQuery를 UI 모달 창에서 보여줍니다

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

.

페이지에 여러 개의 동영상이 있습니다.

모든 방향에 만족합니다.

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>