5
(2)

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/1padding-bottom:100% (perfect square)
4/3padding-bottom: 75% (standard tv ratio – 3/4 * 100)
3/2padding-bottom: 66.66% (35mm still photography – 2/3 * 100)
21/9padding-bottom: 42.85% (cinematic widescreen – 9/21 * 100)
16/9padding-bottom: 56.25% (standard widescreen – 9/16 * 100) most popular
9/16padding-bottom: 177% (tall screen – 16/9 * 100)

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 2

No votes so far! Be the first to rate this post.

Categorized in: