How to show video and open in lightbox on click, with jQuery prettyPhoto?

Question

I am trying to use prettyPhoto for jQuery to add videos to my site.

I added the jQuery source code and the place prettyPhoto js in my head to the end of the body tag, and also added initialization code (as the documentation says).

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

In my HTML, this is what I wrote because I wanted the video to show too, but when someone clicks on it, the video should open as a lightbox.

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

But it does not work. How to do it?

Answer 1

This is how you should do it

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> 

No need to change JavaScript at all.

Working demo: http://jsfiddle.net/naveen/HU8zx/
Documentation: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/