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

Question

I am trying to use the prettyPhoto for jQuery to add a video to my website.

I did add the jQuery source code and the prettyPhoto js location in my head, and before the end of my body tag, and I also added the initializing code (as said in the documentation).

   <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 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's not working. How do I make this happen?

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 you JavaScript at all.

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