Did this ever happen to you? You create a video block in Squarespace, you attach a youtube video link and instead of having a nice landscape video of 16:9 ratio it actually displays it in 4:3 ratio and the cover image is just not sized correctly?
No matter what the reason is behind this happening, you can easily force video blocks in Squarespace to have a certain aspect ratio. All that aspect ratio is controlled by a “padding-bottom” CSS property. Why is that?
The padding CSS property’s percentage is based on the width of the parent element not on the height of it. Even if the “padding-bottom” or “padding-top” is specified the percentage is still based on the width of the parent element.
Usually we use the padding-bottom percentage to make perfect circles or perfect squares because this way we can apply the same height as the width, since padding-bottom: 100% is equal to the computed value of the width of the parent element. (in this case the parent is the body tag):
Anyway getting back to the main subject, in case your video block is keep having a 4:3 ratio instead of 16:9(more narrow videos instead of landscape videos) then you could force to have a 16:9 ratio just manipulating that padding-bottom on a certain element in the video block.
The CSS code is following:
/*make video-blocks 16:9*/
.video-block {
.embed-block-wrapper,
.intrinsic-inner {
padding-bottom: 56.25% !important
}
}The padding needs to be added in 2 places and 56.25% basically means 16:9 ratio. Now the Chicago video looks much better:
Update: In case of native videos the selectors are different:
.video-block {
.video-player {
padding-bottom: 56.25% !important
}
}How did we get this percentage value(56.25%) ?
We simply divided 9 by 16 and got the value 0.5625. That value multiplied by 100 results in 56.25. The initial “padding-bottom” value on our video is 75% since the video had a 4:3 ratio and the value was provided from the 3 divided by 4 and multiplied by 100 operation.
What about other ratios?
| 1/1 | padding-bottom:100% (perfect square) |
| 4/3 | padding-bottom: 75% (standard tv ratio – 3/4 * 100) |
| 3/2 | padding-bottom: 66.66% (35mm still photography – 2/3 * 100) |
| 21/9 | padding-bottom: 42.85% (cinematic widescreen – 9/21 * 100) |
| 16/9 | padding-bottom: 56.25% (standard widescreen – 9/16 * 100) most popular |
| 9/16 | padding-bottom: 177% (tall screen – 16/9 * 100) |
thank you so much for this!!! any tips on making the changes only apply to video blocks on one page vs. globally?
Yes. You should use a block id before your selector:
section[data-section-id="62288e21b7d01f1d41761926"] .video-block {
.video-player {
padding-bottom: 56.25% !important
}
}
To get the block id you can use the squarespace id finder extension in Chrome or Brave or Firefox and the id will appear above your video when extension is activated: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en
Hey Jozsef, any tips for making it wide screen 21:9, I entered the 42.85% in the padding bottom however it doesnt seem to make it any smaller, i seem to only be able to make it larger? The video is 21:9 and the player is showing at 16:9 and thats as small as it seems to go? Thanks for any help!
Hi Laura. Actually I have a better solution now:
If you are using a Youtube link for your video, just use this style instead of the padding-bottom approach:
.embed-block-wrapper iframe {
height: auto !important;
aspect-ratio: 21/9;
}
If you are uploading a video from your computer then use this:
.video-player .plyr {
aspect-ratio: 21/9;
}
To get rid of the bottom space that is outside the video player, you need to also do this:
.video-block {
.video-player {
padding-bottom: 42.85% !important
}
}
If it is a youtube video or other video that is linked not uploaded than use this:
.embed-block-wrapper,
.embed-block-wrapper .intrinsic-inner {
padding-bottom: 42.85% !important
}
Hi, Can i get some help understanding this? I thought I had it all right but it just is not working.
Here is the code I have
}
#block-yui_3_17_2_1_1693093359256_104460
.video-player .plyr {
aspect-ratio: 1/1;
}
#block-yui_3_17_2_1_1693093359256_104460
.video-block {
.video-player {
padding-bottom: 100% !important
}
It’s the video of the shimmer near the bottom, I’m trying to make it square like the others
Please provide a url, for me to take a look