Video thumbnail on lightbox

Design help Animations & Interactions
1

Hi gang, can anyone advise how to have a video thumbnail on light box as opposed to an image

I’m using the lightbox here https://creative-cecilia.webflow.io/ (right below hero section) Rather than using an image, I think it would be cooler if it could be a video, (like animated gif) but you’re not able to load video. I tried to add a video background element, but that’s not working…

I believe b/c it’s not a section spanning then entire width of body (I think the element is pre-configured to work certain ways)

Appreciate any help!

2

just pinging to see if anyone has a solution.

I know I could load an animated gif but then the quality is pretty low

3

Hey, I had the same problem today, and was pretty baffled at first. After a bit of messing around I figured it out: The Background Video element has a very low z-index by default. You need to create a new class and increase the z-index until the video is visible. Remember to repeat this for anything that goes over the Lightbox at any point.

4

Hi I have the same problem. I have increased the z-index for the background video element to 999. But the background video is still not visible.

@Clovis_Braun
Could you please elaborate your steps?

5

Hi, I have figured out a better way to implement video previews in the meantime. Using Cloudinary, I simply embed the hosted video into a lightbox. Cloudinary automatically generates a poster image which you can add by using the same embed link with .jpg at the end. I also made the video play on mouseOver and pause on mouseOut.

The code looks something like this:

<video width="100%" height="" loop muted playsinline poster="LINK.jpg" onmouseover="this.play()" onmouseout="this.pause();">
  <source src="LINK.mp4" type="video/mp4">
</video>

As long as the Container is responsive, the video embed should be too.