NO BUG: Video height does not work

Bugs
1

Browser: Chrome
OS: Windows
URL:
Video: Recording #52

A video from URL. The height setting does nothing.

However, changing top and bottom padding makes the video height change. :slight_smile:

See the video linked above.

UPDATE: It looks like this CSS is preventing the height from working. Specifically, “padding-top”.

:where(.brxe-video) {
    align-items: center;
    background-color: var(--bricks-bg-light);
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
    width: 100%;
}

This also prevents the video from staying within its container if the container height is set.

Workaround
Put this in the video element custom css:

root {
  padding-top: 0;
}
2

Hi. Try wrap it in a block. and change the block height. It works for me

3

Doesn’t work for me due to the large unwanted top padding on the video. :slight_smile:

4

The idea of using padding-top for iframes is to ensure the aspect ratio is preserved across different device widths.

If you change the height and set the padding to 0, it’ll work in changing the height, but you’ll likely run into issues when you try to shrink the video down for smaller devices, because now the height is no longer a % of the width and so the aspect ratio won’t be preserved.

(I’m speaking generally reg iFrames, not Bricks specific. These days we have aspect-ratio CSS property, but this padding-top ‘trick’ that Bricks is using for iFrames is very common for handling aspect ratios of videos .it’s not a bug. Similar to images, it’s assumed that only the width will change, and the height needs to remain relative in size to the width)

5

How do I change the height of a video if it is not a bug? :slight_smile:

6

You change the width (of the container around it, not the video element), and the height will change with it.

7

It leaves padding on top of the video and visibly causes padding on top and bottom unless the workaround is used. So it doesn’t really work.

8

This is what I mean


https://www.loom.com/share/3a2ef86a4daf45dd9c41a48c518df10b

Changing the width only is generally how the size of the video is changed. height and width, keeping the same aspect ratio.

Maybe you’re thinking of it working a different way, or have found a different bug that I’m missing. I’ll let others answer, I was just commenting reg. the purpose of the padding-top being there and why it’s used generally with iFrames.

9

Look at the padding on the top and bottom when I change the video width.

I can make the video size correctly by using my workaround and using vw heights on the video and container without the padding-top set.

10

Needs to be the width of the container around the video element that is changed, as in my video, not the video element.

Either way will work, your work around, or changing the width of the div around it and allowing the padding to control the height.

1 Like
11

I see that now.

Here is how I make the mobile phone widths work using my workaround and vw heights.

12

Hi,
I have nothing more to add to David’s explanations. It is not a bug.

Best regards,
timmse