Change the aspect ratio of the video container

Hello,

I need to change the aspect ratio of the video container so that it can be customized to different video sizes. Currently, the only option I have is to keep it in landscape format, but I have some videos that are in portrait or square format. Can you please help me with this issue? 

Ex: I want this two videos to be portrait (I can crop them on after effects if needed)

Or these ones (the videos are already portrait but the container is landscape):

Thank you so much!

Hi. It is a little bit harder to give you the best advice without seeing your website, but I can write here 2 solutions that might work but it all depends of the structure you are having in your video block:

The first:

.video-block { 
    .video-player {
       padding-bottom: 177% !important
    }
}

The second if the first does not work for you:

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

For further explanation or other options please visit my article:

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

If these 2 examples don't help please let me know. The 177% is for 9/16 portrait aspect ratio.

Hello @joseph81,

I have a similar problem.

I need to change the aspect ratio of the video container so that the whole video can be seen on the page. Currently there is empty space above and below the video. 

I already tried your solution but it doesn't work.

www.psk-legal.de/home-2

PW: psk_ws2022

In your case the following percentage seems to fit:

.sqs-native-video .native-video-player {
    padding-top: 38.25%;
}

Thank you! That works for the top. And only in squarespace backend. As soon as I leave the backend the video container jumps back to the original size.

Underneath the video ist still a white space. How can I remove this too?

Actually these are the right classes. But for underneath the video, that seems like the flexible grid issue of Squarespace. Maybe you could delete the video and add it again(keeping the new CSS code). 

.video-block .video-player {
    padding-top: 38.25%;
}

I deleted the video and added it again. Still the same. If I open the CSS window it looks fine. But as soon as I leave the backend the video container jumps back to the original size.

Oh, it seems you have a code specificity problem. The new code is not overwriting the default code, so let's put an important flag on it:

.video-block .video-player {
    padding-top: 38.25% !important;
}

Thank you so much!! Now it works 🙂

Hello,

I am having a similar problem. Unsure what the aspect ratio of the video I uploaded is, but there's space above and below, so my video is too narrow.

https://violet-conch-62zc.squarespace.com/mixtape

password is brineintopedro

Thank you!

You just need to play with the percentages:

.video-block .video-player {
    padding-top: 16.25% !important;
}

If you want to take out the 2px top and bottom space then write this also:

.video-block {
	border: none!important;
}

Thank you, I have been playing with the percentages but nothing gets rid of the top and bottom space without decreasing the size of the video. This is what it looks like with the code you provided, for example. 

Experiencing the same issue as ghostpep___ , has anyone found a solution?

Hi @joseph81 !

Can you pls pls help me as well? I have different videos on my site and when I use square videos the video itself doesnt fill the frame. How can I just tell the square videos to "fit to frame" so to speak? The video is the one with the numbers/ coordinates to the right.

Very thankful, Anders

Found this: 

And this:

https://www.will-myers.com/articles/what-is-a-block-id-in-squarespace-and-how-to-find-one