[Support request] (Some) grids with Vimeo embeds too tall

[Samantha]

Hi,

I’m creating a standard layout of

benefit | video
video | benefit
benefit | video

using a grid, only the second video is far too tall, with too much whitespace above and below both the video and the text. it displays fine in the WP editor, but not on the rendered page.

I can’t see any weird height, margin, or padding declarations in the elements, except for height: 100%;

any ideas what I’m doing wrong?

thank you 😊

[Elvin]

Hi Samantha,

I’ve checked the site but I’m not exactly sure I’m seeing the thing you’ve described.

Here’s what I see on my end – https://share.getcloudapp.com/rRuWLp5D

All the videos seem to be of the same height. Perhaps you’ve sorted this already? Let us know. 😀

[Samantha]

Thank you,

sorry I should have been more clear. yes, it’s the space between the 2nd and 3rd videos that shouldn’t be there. in the editor, there is 0 vertical padding, and yet there’s a good ~120 pixels between the 2nd and 3rd grids (and also under the 3rd video grid, this should also be 0)

[David]

Hi there,

its to do with the iframe ( which WP outputs for the video ) not being responsive. Its height is set to 720px so the iframe container always occupies that space.

Try adding this CSS to fix that:

.wp-block-embed-vimeo .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.wp-block-embed-vimeo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

[Samantha]

oh, thank you so much David! tested and working perfectly! 😊

[David]

Glad to be of help!

[Author]

Posts