How to do a video scale up animation/modal?

Design help Animations & Interactions
1

Hi everybody.

I’ am sending this post because I am struggling with this for more than one week.

I got a page with videos (3) that are made with background videos.
so they are autoplaying and looping exactly as I wanted.

BUT…
I also want the viewer to be able to see them in a bigger size.

Almost like if I was able to make every video a solo lightbox with the video playing and looping as a thumbnail an the same video also autoplaying and looping in the lightbox window.

But, if I am not wrong you can’t have a video as a picture of a lightbox.

I have also try by simply using animation to scale up and moving the video when clicking on the video but the result is not very clean and I have issue with z-positioning : I was able to do it right with the first video witch is on top of the other layers but not with the others video.

I also manage to put the video in a link block but the only way I have found to create what I want is to duplicate the whole page, put the modal window on the center, then use the link block to sent to that page and have a button on it to get back to the original page but I think this is a very dirty hack to do so.

Do you have any idea on how to do this ?

Thank you a lot by advance

here is the link to the share project :

https://preview.webflow.com/preview/concrete-imagination-version-3-01?utm_medium=preview_link&utm_source=designer&utm_content=concrete-imagination-version-3-01&preview=430f75576cf2811430b8ba5c39301e2d&pageId=61d1d137bb740bef2972b6fd&workflow=preview

Here is my public share link: Webflow - Concrete Imagination 2.0
(how to access public share link)

2

You are, you can set a youtube link as the image in the lighbox.
And in the Lightbox link element, you can put your bg video element.

1 Like
4

Thank you Vincent

Happy that I am wrong :slight_smile:

I finally use backgrounds video as thumbnail as I struggle to make youtube video autoplay and autoloop but it works find !

I am stupid : I should have look in the navigator and try to put an other objet than a simple image

but btw once again thank you !