Help with 2.35:1 video aspect ratio

I Need Help
1

Hi!
I have been working on a website for a while now that uses a lot of videos with a 2.35:1 aspect ratio. Unfortunately Blocs doesn’t have a setting for that in the video brick. The best I have been able to do is stuff the 2.35x1 videos in a brick set to 16x9. This has resulted in unwanted margin/padding above and below the video.

Screen Shot 2020-12-10 at 11.04.03 AM 2
Screen Shot 2020-12-10 at 11.04.03 AM 21237×2139 272 KB

Here are three screenshots:

  • The first is a screenshot of a website with 16x9 videos in video bricks set to 16x9. (I have drawn colored lines to highlight the layout).
  • The second is a screenshot of a website with a 2.35x1 video stuffed into a video brick set to 16x9. The video is not level with the text in the sidebar because the margin/padding from the aspect ratio is pushing it down (I have drawn colored lines to highlight this problem).
  • The third is a screenshot of six videos; one is a 16x9 and the rest are 2.35x1. All of them are inserted into video bricks set to 16x9.

I was rather surprised not to find any other posts about this subject, there are so many more aspect ratios than the four currently supported. But I admit that after a little research I too was surprised by how many aspect ratios there are (I found this video really informative https://www.youtube.com/watch?v=3CgrMsjGk7k).

If anyone knows how to work around this problem by changing the CSS or HTML in the code editor or after exporting the website I would really appreciate the help.

2

Hi @Dragonfly,

Make a custom class called

video235

Apply that class to the video in question.

Then add this to the page header

<style>
.video235::before {padding-top: 42.55%!important}
</style>

That will over-ride it to the 2.35:1 ratio. But also allow you to still display 16:9 if you like, by just not using that class.

Note: If any one is interested how you work out the percentage. its the height / width * 100.

eg. 2.35:1 ratio is… 1 / 2.35 * 100 = 42.55%

4 Likes
3

Hi @PeteSharp!
Thank you so much! Your custom class worked like a charm. It is such a relief to have this bug fixed!