Jump to content

Responsive Video Sizing for embedded Vimeo

Recommended Posts

Hi there!

I am wanting to embed a vertical Vimeo video so that the sizing is responsive for desktop and mobile viewing.

The issue I am having is that when I embed the video, it seems to be responsive to the width instead of the height, making the video much too tall so I have to scroll down to find the play button. When I adjust the size limitations and add centering code, I can get this to work on the desktop but then the mobile version is still off.

Is there a way to have the the responsive embedding work based off the height of the video instead of the width? Ideally the video is centered in the block and fits within the visible height of the browser. 

I am not a coder so I'm feeling around in the dark here. I would appreciate any help!

Thanks!

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 months later...

Hi, 

I am encountering the same problem here. I tried the video background first but the playing on mobile doesn't work on every device and browser. 

I used a video block instead but the height is too small on mobile. And I was wondering if there was a another way to increase the height (through CSS code or another trick)? 

Here is an example : https://www.agencechaiten.com/home-1 - password : chaiten2023

Thanks very much for your help

Link to comment
On 4/14/2023 at 5:33 PM, LucieGbt1993 said:

Hi, 

I am encountering the same problem here. I tried the video background first but the playing on mobile doesn't work on every device and browser. 

I used a video block instead but the height is too small on mobile. And I was wondering if there was a another way to increase the height (through CSS code or another trick)? 

Here is an example : https://www.agencechaiten.com/home-1 - password : chaiten2023

Thanks very much for your help

Where is video block?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • John_SQSP changed the title to Responsive Video Sizing for embedded Vimeo

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.