lightbox for videos

[TheNNS]

I'm wondering if there is anything like lightbox but that is compatible html 5 videos. I know there are several ones that support youtube videos, but I want to do it with videos i'm hosting on my own site.

[Arkinder]

Yes, using jQuery there are tons of options. A lot of these use photo, but they are easily replaced with videos.

Regards
Arkinder

[TheNNS]

No, I'm pretty sure those don't work with video. I've googled for hours and I can't find anything that will work with videos.

[Arkinder]

No, they do. You just use an object tag instead of image tag.

Regards
Arkinder

[TheNNS]

<a href="/movies/movie.ogv" title="movie">
                <object  width="200" height="100" />
                <param name="movie" value="/movies/movie.ogv">
                </object>

this doesn't work. What's wrong with it?

[Arkinder]

<object width="200" height="100" /> shouldn't have a / .

<a href="/movies/movie.ogv" title="movie">
<object width="200" height="100">
<param name="movie" value="/movies/movie.ogv">
</object>
</a>

Regards
Arkinder

[G&G Designing]

hey, if you want me to i can make you a custom html5 video player like your asking, just leave a link to my design site on your website

[sohail_ali]

Hi Guys.... I have the same problem to open my own video in a lightbox. I am using this lightbox http://www.lokeshdhakar.com/projects/lightbox2/ to open the video. I have replaced the image tag with the object. Here is my code

<a href="video.flv" rel="lightbox">
Movie
<object width="200" height="100">
<param name="movie" value="video.flv">
</object>

But It is not working either. I am not using html5

[Arkinder]

sohail_ali, this is probably similar for TheNNS.

<div class="section">


	<h2>Example</h2>

	<h3>Single Images</h3>
	<div class="thumbnail">
		<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

	</div>
	<div class="thumbnail">
		<a href="images/image-2.jpg" rel="lightbox" title="Optional caption."><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>
	</div>

	<h3 style="clear: both;">Image Set</h3>

	<div class="thumbnail">
		<a href="images/image-3.jpg" rel="lightbox[plants]" title="Roll over and click right side of image to move forward."><img src="images/thumb-3.jpg" width="100" height="40" alt="Plants: image 1 0f 4 thumb" /></a>

	</div>
	<div class="thumbnail">
		<a href="images/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key." ><img src="images/thumb-4.jpg" width="100" height="40" alt="Plants: image 2 0f 4 thumb" /></a>
	</div>
	<div class="thumbnail">
		<a href="images/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/thumb-5.jpg" width="100" height="40" alt="Plants: image 3 0f 4 thumb" /></a>
	</div>
	<div class="thumbnail">
		<a href="images/image-6.jpg" rel="lightbox[plants]" title="Press Esc to close"><img src="images/thumb-6.jpg" width="100" height="40" alt="Plants: image 4 0f 4 thumb" /></a>

	</div>
	
</div><!-- end .section -->

Note the class and rel attributes. You will need those to be the same in your HTML. And then you also have to have all of the IDs match up.

<div id="overlay" style="width: 1261px; height: 3112px; opacity: 0.8;"></div>
<div id="lightbox" style="top: 67.3px; left: 0px;">
<div id="outerImageContainer" style="width: 470px; height: 358px; font-size: 37.0621px;">
<div id="imageContainer">
<img id="lightboxImage" width="450" height="338" style="" src="http://www.lokeshdhakar.com/projects/lightbox2/images/image-1.jpg">
<div id="hoverNav" style="">
<a id="prevLink" href="#" style="display: none; height: 338px;"></a>
<a id="nextLink" href="#" style="display: none; height: 338px;"></a>
</div>
<div id="loading" style="display: none;">
<a id="loadingLink" href="#">
</div>
</div>
</div>
<div id="imageDataContainer" style="width: 470px;">
<div id="imageData" style="">
<div id="imageDetails">
<span id="caption"></span>
<span id="numberDisplay" style="display: none;"></span>
</div>
<div id="bottomNav">
<a id="bottomNavClose" href="#">
<img src="images/closelabel.gif">
</a>
</div>
</div>
</div>
</div>

Then, if it still doesn't work. You probably just have to change the jQuery selector, which is pretty easy.

Regards
Arkinder

[TheNNS]

Arkinder, the code you provided was for images. It doesn't work with videos. When I embed videos and click on them it loads forever, but never plays.
also this is taken from lightbox2's website

Can I display flash, video, or other content using the script?
Sorry, photos only. For other content, google for Lightbox modifications or try an alternative script such as Cody Lindley's ThickBox.

[Arkinder]

Arkinder, the code you provided was for images. It doesn't work with videos. When I embed videos and click on them it loads forever, but never plays.
also this is taken from lightbox2's website

What I provided was in response to the other posters link. Regardless, if it uses jQuery there are simply modifications that will allow the image galleries to work. It doesn't work currently because you're doing something wrong. Just use this instead.

Regards
Arkinder