Change lightbox-view size, border radius, and autoplay- Need Help

Hello Webflow Community,

I’m using a FILMAX template to create a portfolio website for a client. I am in the final stages of design and in a tight schedule and I am having a big issue with the lightbox-view customization. I believe that I need to create a custom CSS code to achieve these final design changes but since I have zero experience with coding I don’t know where to begin.

Could anyone help me come up with a custom code to:

  1. Change the lightbox-view display size to fill the entire screen.

  2. Remove the border radius that was added in the template (which i have no clue how the person that made this template changed in the first place)

  3. Make the video autoplay once the thumbnail is clicked and the lightbox-view is opened.

Someone in the forum posted a similar question about changing the lightbox-view background which was solved, so I know this can be done, I just don’t know what code to write to change these attributes. (Here’s the link to that forum post)

Any guidance, especially in a simplified manner suitable for someone new to coding, would be incredibly appreciated. My deadline is Jan. 10th, so any prompt assistance would be a lifesaver.

Thank you so much in advance for your help!


Click Here for my site Read-Only Link

Click Here for my Published Link

(for some reason some of the background videos of the lightbox elements in the read-only site don’t appear to be playing, but just know that there is a looping video in each thumbnail)

To fix the border radius issue you can do this

  1. Add A Custom Element (You can just drop it anywhere on a page…it will be deleted in a second)

  2. With the custom element selected, click on the the element settings and where it says “tag” change div to figure

  3. Then in the style tab, you can make the border-radius 0px (it’s going to say 0 pixels by default, so be sure to type in 0 again to reinforce it) and it will force it to be 0 pixels

  4. Then you can delete that custom element…the style will still be applied to your project

Thanks for the response! Sadly this doesn’t seem to work when applying the style of the custom element to the existing elements. Anyway, thanks again for taking the time.

So I searched the forum for answers and a solution kept popping up in various posts. I’ll link these posts here and here.

This solution mentioned copying a code into the head of the page which solved two of my existing problems.

  1. It removed the border radius of all the lightbox frames

and 2. All of the lightbox frames are now the size I specified.

Sadly, half of the lightbox frame is cropped for some reason, and I believe the template I am using to be the culprit. I copied the entire home page to a blank canvas and added this code to the head of the page and it works perfectly when published.

If anyone has the slightest idea on why the lightbox frame gets cropped in half I’d greatly appreciate it.

I’ll provide the code I used in the head of the page below.

<style>
.w-lightbox-frame, .w-lightbox-embed {
width: 100vw;
height: 90vh;
}
</style>

And here are some small video clips with the issue at hand.

Actual Site(customized template)
This is a small clip of the issue I outlined in the text above. As you can see only the top part of lightbox-frame is visible. I’ll link the published site here.

Test Site(no template)
Where as in this test site I created the lightbox-frame seems to be working perfectly with the custom code i added to the head of the page. I’ll also link this published test site here.

Did you figure it out? I’m also struggling with this issue for this template.