jQuery prettyPhoto를 사용하여 동영상을 표시하고 클릭하면 라이트 박스에서 여는 방법?

Question

jQuery에 prettyPhoto를 사용하여 내 웹 사이트에 비디오를 추가하려고합니다.

내 머리글에 jQuery 소스 코드와 prettyPhoto js 위치를 추가하고 body 태그가 끝나기 전에 초기화 코드 (설명서에 설명 된대로)를 추가했습니다. 내 HTML에서

<script type="text/javascript" charset="utf-8"> 
     $(document).ready(function(){ 
     $("a[rel^='prettyPhoto']").prettyPhoto(); 
     }); 
    </script> 

이 나는 ​​비디오도 보여주고 싶어서 쓴, 그러나 누군가가 클릭 할 때 비디오가 라이트 박스로 열립니다 것입니다.

<div id="video_player"> 
<a href="#" rel="prettyPhoto"> 
<iframe width="640" height="350" src="http://www.youtube.com/embed/cH6kxtzovew" frameborder="0" allowfullscreen></iframe> 
</a> 
</div> 

하지만 작동하지 않습니다. 어떻게해야합니까?

Answer 1

이것은 당신이

HTML

<div id="video_player"> 
    <a href="http://www.youtube.com/watch?v=cH6kxtzovew" rel="prettyPhoto" title="My YouTube Video"> 
     <img src="http://img.youtube.com/vi/cH6kxtzovew/default.jpg" alt="YouTube" width="50"> 
    </a> 
</div> 

에게 전혀 당신에게 자바 스크립트를 변경할 필요를하지 않는다 방법이다.

작업 데모 : http://jsfiddle.net/naveen/HU8zx/
문서 : http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/