Vimeo Resize Player Size in Lightbox

Design help General
1

I was having the same issue as this guy here (Change default size of Player in Video Lightbox)

I fixed it using the solution provided on that question HOWEVER, it only works when I visit the ‘published’ site through webflow. When I download the code and upload to my web server, the page ignores the code and continues to size the vimeo player too small.

Any idea as to why it works on webflow publishing, but not on my webserver?

Best way to see the problem is, first click on this link which is the published site on webflows server: WEBFLOW VERSION

Then click this link which is hosted on my server (following an export of code): MY HOST VERSION

Scroll down to the video, hit play and you’ll see what I mean.

Here is my site Read-Only: LINK

2

Please provide a read only link to your published project (hosted or self hosted). Without that it is impossible to see the issue.

3

Edited to include links

4

I noticed your site is not redirecting to https:// automatically yet you do have an SSL certificate.

When I visited the site securely, I did not see the issue. Tested with Chrome on Windows 10 pro current build.

5

Its hard to answer because viemo add a lot of markup. Maybe first try to create resize player without lightbox (Easier to debug).

By the way - On your “hosted” ver you got this js error.
Uncaught TypeError: Cannot read property 'setAttribute' of undefined
image

6

Hi guys

Thanks for the suggestions, I actually fixed it last night but couldn’t log on here to say anything as I was temporarily locked out.

Turned out that I needed to manually set the Vimeo size in the html file in the light box to 1920 x 1080. That in combination with the override code suggested in the other thread now works great.

Thanks for your responses.

7

Hi there, I’ve followed this thread and the other one as suggested but for myself to no avail.

I want to make these changes to the vimeo video within Webflow as that is where I am planning to host the site from as well. I have seen that the solution is to:

…override both the frame div and iframe embed:

.w-lightbox-frame, .w-lightbox-embed {
    width: 100vw;
    height: 100vh;
}

How do you do this exactly within Webflow?

So as you can see and probably tell, I’m pretty new to Webflow but would also like to know how to resize the player in Vimeo upon the lightbox link being clicked upon.

Here is the project I am working on: SPREAD Webflow Version

I basically just want the size of the embedded Vimeo video to be increased and would like it to autoplay once the area is clicked upon.

If somebody could explain to me in laymen’s terms (with a video or pictures) as to how this could be achieved it would be much appreciated. Thanks.

8

Im having the same problem.

I dont know where to insert that code and dont understand why its not an option in settings for height and width.

And autostart.

9

I’m having this same problem. Is there any solution to making an embed video’s light box frame larger?