Jump to content

Changing aspect ratio of video player - Squarespace hosted videos

Go to solution Solved by joseph81,

Recommended Posts

Does anyone know how to change the aspect ratio for video player?

 

I'm using the uploaded-to-Squarespace video option in fluid engine and wanted to get a fun little gallery of 4-5 talking head video shorts, using a 4:5 aspect ratio.

I can upload videos in that aspect, and when actually playing it (desktop) looks as I want it to, but the video controllers are in a 16:9 shape, and so is the cropped thumbnail before you hit play. And on mobile it keeps the 16:9 ratio so the video is too small, when a 4:5 should look good on mobile with the videos stacked. If I make the video block the right shape, it just shrinks the video inside it right down with a gap top and bottom.

It feels like there should be a 'design' tab in the video block to control how it looks. So frustrating!

Site https://digital-prospectus.squarespace.com/ 

Password: Dani123 - forgive the random appearance, it's in 'playing with ideas' stage at present.

 

Screenshots: 1 and 2 are the thumbnail and video controls showing how it forces a wider aspect ratio. The third one is what it looks like whilst playing, this is how I want it to look. 4 is playing in mobile - it shrinks down because it is using the too wide video block.

Screenshot 2022-11-11 at 15.28.58.png

Screenshot 2022-11-11 at 15.28.22.png

Screenshot 2022-11-11 at 15.28.13.png

Screenshot 2022-11-11 at 15.43.48.png

Link to comment

I just wrote yesterday an article about this actually: 

/*make video-blocks 4:3*/
.video-block {
   .embed-block-wrapper,
   .intrinsic-inner {
    padding-bottom: 75% !important
  }
}

https://www.ui-workarounds.com/control-the-aspect-ratio-of-your-videos-in-squarespace/

Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment

The 4:5 ratio would look like this:

.video-block {
   .embed-block-wrapper,
   .intrinsic-inner {
    padding-bottom: 125% !important
  }
}

My solution works with video blocks, I'm not sure what you are using since the  password you provided does not work to enter your website.

Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment
  • 1 month later...

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.