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

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

Home Forums Support (Some) grids with Vimeo embeds too tall

  • This topic has 5 replies, 3 voices, and was last updated 3 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1970285
    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 😊

    #1970314
    Elvin
    Staff
    Customer Support

    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. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1970473
    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)

    #1970504
    David
    Staff
    Customer Support

    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%;
    }
    #1971278
    Samantha

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

    #1971564
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.