Changing aspect ratio of video player - Squarespace hosted videos

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.

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/

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.

Ah @joseph81 it works perfectly! You superstar, thank you ever so much. 

@joseph81 do you know how to make video block conform to a 1x1 aspect ratio? I have some square videos that I want to put on my page but the video block keeps making the 16:9

For square you should use padding-bottom: 100%

Trying to get a square video In 7.1 Fluid Engine...

padding-bottom: 100% !important

the square 1:1 (1080p x 1080p) video is uploaded to SQSP (not hosted externally) and this code adds white space above and the gradient control bar to the bottom. Not at all square. Any thoughts?

On 7/2/2023 at 7:08 AM, anthony-onlineiseasy said:

Trying to get a square video In 7.1 Fluid Engine...

padding-bottom: 100% !important

the square 1:1 (1080p x 1080p) video is uploaded to SQSP (not hosted externally) and this code adds white space above and the gradient control bar to the bottom. Not at all square. Any thoughts?

Can you share link to this page? We can check easier

To get the 1:1 video to work, I needed to use 44% (thanks @Vigasan) ... I'm curious now if I can get rounded corners on the video ... this doesn't work "border-radius: 25px;"

padding-bottom: 44% !important

Any ideas on rounded corners for videos? ... note: the site is live now https://agaymanbook.com/

22 hours ago, anthony-onlineiseasy said:

Any ideas on rounded corners for videos? ... note: the site is live now https://agaymanbook.com/

Use this CSS

/* Round video */
.video-player .plyr .plyr__controls:before
{display:none!important;}

.plyr__video-wrapper video, .plyr__video-wrapper
{border-radius:30px !important;}

I'm hoping to target a specific video and not all videos globally 😕 also, where exactly do I put the code (I'm assuming the custom css section?)

21 hours ago, Martian said:

I'm hoping to target a specific video and not all videos globally 😕 also, where exactly do I put the code (I'm assuming the custom css section?)

Add video block id before the code

#video-block-id {
/* Round video */
.video-player .plyr .plyr__controls:before
{display:none!important;}

.plyr__video-wrapper video, .plyr__video-wrapper
{border-radius:30px !important;}
}

Use this tool to find id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

where does the video block ID go within the code just posted? Can you show example?

15 hours ago, Martian said:

where does the video block ID go within the code just posted? Can you show example?

replace red box with video block id

Does this code go in Custom CSS or the Advanced section of the page?

On 8/29/2023 at 11:03 PM, Martian said:

Does this code go in Custom CSS or the Advanced section of the page?

Custom CSS (Website > Website Tools > Custom CSS)

thank you tuanphan!

trying to get this code:

section[data-section-id="62288e21b7d01f1d41761926"] .video-block {
.video-player {
padding-bottom: 56.25% !important
}
}

to work with this ID:
#block-yui_3_17_2_1_1696090350035_1891

For this website using the Squarespace native video:
www.martiandesign.com

I cant seem to get it to work. Any help is greatly appreciated.

I'm currently using this code but I'm having issues:

/* The following resizes the Andromeda Cloud video */
#block-yui_3_17_2_1_1696090350035_1891 {
padding: 0px!important;
.embed-block-wrapper  {
  padding-bottom:0!important;
}
.native-video-player {
    padding-top: 70%;
}
video {
   object-fit: cover;
}

Also, I'm wondering if there is any way to make the videos "Fill" the grid like photos (attached)

On 10/1/2023 at 9:39 PM, Martian said:

trying to get this code:

section[data-section-id="62288e21b7d01f1d41761926"] .video-block {
.video-player {
padding-bottom: 56.25% !important
}
}

to work with this ID:
#block-yui_3_17_2_1_1696090350035_1891

For this website using the Squarespace native video:
www.martiandesign.com

I cant seem to get it to work. Any help is greatly appreciated.

 

I'm currently using this code but I'm having issues:

/* The following resizes the Andromeda Cloud video */
#block-yui_3_17_2_1_1696090350035_1891 {
padding: 0px!important;
.embed-block-wrapper  {
  padding-bottom:0!important;
}
.native-video-player {
    padding-top: 70%;
}
video {
   object-fit: cover;
}

 

Can you share link to a page where you use video? We can check easier

@tuanphan https://www.martiandesign.com/work/andromeda

On 10/1/2023 at 4:48 PM, Martian said:

Also, I'm wondering if there is any way to make the videos "Fill" the grid like photos (attached)

any luck with this? i'm looking to do this exact thing

https://sponge-garlic-ds7r.squarespace.com/

pw: makeup

homepage

@tuanphan

No luck