Videos have a wrong aspect ratio on my CMS

Design help Layout & Design
1

Hello Webflowers!
I’m having a hard time with my CMS template.

Uploaded videos have the wrong aspect ratio on my blog.
Instead of the regular 16:9, they’re appearing as a narrow video with black bars at the sides:

Untitled-1
Untitled-11421×842 130 KB

I tried fixing this by setting a min-height of 480px to the Figure element within my articles (I’m by no means a Webflow expert, I’m tweaking the work of a Webflow designer) and it worked.

The problem is that it also forced all my images to have a min-height of 480px and that destroyed the layout of my blog posts.

Is there a way to have videos showing up correctly on both desktop and mobile using a standard 16:9 aspect ratio?

Thank you for your time,

  • G

Here is my site Read-Only: https://preview.webflow.com/preview/eventlive-web?utm_medium=preview_link&utm_source=designer&utm_content=eventlive-web&preview=72d147223b91ceede77274e3afdc5d0a&pageId=6112b13e8dd274880471700c&workflow=preview

2

Ahh, at least I know what this means now.
image

To get aspect ration correct you need to use padding bottom of the container.
56.25%

https://aspect-ratio-boxes.webflow.io/

If this fixes the problem please tick solution and the love heart. It helps to keep the forum tidy.

3

Hey iDATUS, thank you for helping me with this.
I’m a bit lost, to be honest.

Where should I add the padding-bottom?
Btw, the link says “padding top” but you suggested padding bottom. Not sure if I’d achieve the same result.

Do I apply it to all Figures?
I tried and it broke every single image on my CMS.

4

It doesn’t matter if you use the top or bottom.

The div that contains the video.
image
the H and Max W settings are for my needs but may help you as well.

Here are set for the embed (video) I used.
image

Let me know how you get on.

5

Thank you for replying.
Did you test this yourself? I think it doesn’t work within the CMS, as the Div needs to be placed within a Figure element, and it can’t be edited (the Div).

Check the right column: It can’t be edited. I can edit the Figure, but it also affects 100% of my images.

image
image1920×1270 115 KB

6

Sorry I don’t currently have knowledge of the all figures and don’t see any help on it.
I assumed the div was being populated by cms.
I know you can edit RTE and its on my to learn list.
If you have more information or find a solution please post.

7

I had a look at the RTE webflow tutorial which was interesting but I also had a play with the figure class.
You can change those settings. I can’t tell if they work or not as when I go to view it shows the video as you show it in your last post.

image
image245×510 14.1 KB

8

Thank you for trying!
I did modify my Figure class, and it changes all the images within every Article of the website.

Did you try my read-only link? You can actually play with my website in there:
https://preview.webflow.com/preview/eventlive-web?utm_medium=preview_link&utm_source=designer&utm_content=eventlive-web&preview=72d147223b91ceede77274e3afdc5d0a&pageId=6112b13e8dd274880471700c&workflow=preview

I couldn’t find a way to tweak video sizes without messing with the Image ones.