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

jquery lightbox prettyphoto
James picture James · Aug 15, 2011 · Viewed 31.1k times · Source

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

naveen picture naveen · Aug 15, 2011

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/

Related questions

Owl-carousel and lightbox together? Or is there another solution?

I would like to use Owl-carousel and PrettyPhoto lightbox together but before that, I would like to know if a similar all-in-one solution already exists. To be more specific, I would like to make an inline image/video content slider …

Read More
prettyPhoto multiple galleries on one page

I am building a worpdress site and have multiple galleries on a page built using the shortcode. At the moment all the image are given the rel attribute 'prettyPhoto[1]' but I need each gallery to be separate. I have 56 …

Read More
prettyphoto undefined is not a function

I'm attempting to install prettyPhoto lightbox on my site and I keep getting them same error. The following code in the console generates this error "undefined is not a function" <script type="text/javascript" charset="utf-8"> $(document).ready(…

Read More