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