Member Avatar for 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.

  • 4 Contributors
  • 10 Replies
  • 198 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

Quick summary of what’s happening in this thread: and were trying to shoe‑horn video into Lightbox2 by swapping an <img>/<object> into the existing markup — that won’t work because Lightbox2 was written specifically for images. The modern, correct approach is to use the HTML5 <video> element (with multiple <source> fallbacks) and a lightbox that explicitly supports inline/HTML5 video. (developer.mozilla.org)

Practical options that actually support self‑hosted HTML5 files:

  • GLightbox — built for images, iframes, inline content and self‑hosted videos; it can inject a player (Plyr) and handle autoplay / controls cleanly. (github.com)
  • Magnific Popup — supports inline or iframe content, so you can open a hidden <video> block or an iframe that contains an HTML5 player. (github.com)

Minimal pattern that works (GLightbox inline example):

<div id="video1" style="display:none;">
  <video controls preload="metadata" width="800">
    <source src="/videos/movie.mp4" type="video/mp4">
    <source src="/videos/movie.webm" type="video/webm">
    Your browser doesn't support HTML5 video.
  </video>
</div>

<a href="#video1" class="glightbox">Watch movie</a>

<script>
  const lightbox = GLightbox({ selector: '.glightbox' });
</script>

Troubleshooting checklist (things that caused the “loading forever” in these posts):

  • Use <video> not <object> — <object> is legacy/Flash and not what browsers expect for HTML5 playback. (developer.mozilla.org)
  • Provide multiple formats (.mp4 H.264 for broad support, plus .webm), and include correct type attributes so the browser can pick a playable source. (developer.mozilla.org)
  • Ensure the server sends the right MIME types (e.g. video/mp4, video/webm) and check the network console for 404s or Content-Type issues.
  • Autoplay is often blocked unless muted or user‑initiated; don’t rely on autoplay — offer controls and check the browser autoplay policy if needed. (developers.google.com)

If you want a ready drop‑in, try GLightbox first (it’s small and explicitly supports local video). If someone (like ) suggests simply swapping an <object> into Lightbox2, point them at the <video> approach above.

Recommended Answers

All 10 Replies

Member Avatar for Arkinder

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

Regards
Arkinder

Edited by Arkinder because: n/a
Member Avatar for 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.

Member Avatar for Arkinder

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

Regards
Arkinder

Member Avatar for 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?

Member Avatar for 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

Member Avatar for 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

Member Avatar for 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

Member Avatar for 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

Member Avatar for 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.

Member Avatar for 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

Edited by Arkinder because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.