How do I format a video display in GenerateBlocks

Glad you got it working.

To clarify for anyone finding this later: GenerateBlocks doesn’t have its own Video block. What you’re placing in the Container is the core WordPress Video block, which outputs a <figure class="wp-block-video"> wrapping a <video> element. That <video> carries fixed width/height attributes and an inline aspect-ratio style, and the <figure> has its own default margins — which is why it doesn’t conform to the Container’s max-height/max-width.

Your approach of setting an Aspect Ratio on the Container is the right one. If you want finer control over how the video fills that ratio, add a class to the Container under Advanced, then target both the figure and the video with custom CSS:

.your-container .wp-block-video {
    margin: 0;
    width: 100%;
}

.your-container .wp-block-video video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* or "contain" to avoid cropping */
}

Use cover to fill the Container (crops edges) or contain to fit the whole video inside it (may letterbox).

One thing to note: the core block adds an inline aspect-ratio style directly on the <video> element. If you want the video to follow your Container’s aspect ratio instead, you’ll need to override it with aspect-ratio: auto !important; in that second rule, since inline styles take priority over the stylesheet.

A native Video block with built-in sizing controls is a reasonable feature request — I’d suggest adding it to feedback.generatepress.com so the team can gauge interest.

No problem!

Hi,

Can I see a URL please?

Hi,

What exactly are you trying to achieve? Do you want the video’s height to be constrained up to the point where the text at the left ends?

Ok, to begin with, select your grid and align it at the start (align-items: start).

The reason the height won’t change is a conflict between two aspect ratios. The core Video block adds an inline aspect-ratio style directly on the <video> element (in your case 544 / 960, since the source is portrait), and inline styles override anything set in the Customizer or a stylesheet. So whatever you set on the Container, the video keeps sizing to its own inline ratio.

To fix it, target the video element, override that inline aspect ratio, and give it an explicit height. Add a class to the video’s Container under Advanced (or use its existing class), then add this CSS:

.your-container video {
    width: 100%;
    height: 500px;            /* your target height */
    aspect-ratio: auto;        /* overrides the inline 544/960 */
    object-fit: cover;          /* fills the width, crops top/bottom */
    display: block;
    margin: 0;
}

.your-container .wp-block-video {
    margin: 0;
}

A few notes:

1. I don’t see the .butterfly class you are referencing anywhere in the markup so your CSS will not work if you use this class!

2. Since your video is portrait and you’re displaying it in a wider, shorter box, object-fit: cover fills the full width and crops the top and bottom. If you’d rather see the whole video without cropping, use object-fit: contain instead — but because the source is tall, that will letterbox it with space on the sides.

3. Adjust the height value to taste. Replace .your-container with the actual class on the Container holding the video.

Hi,

1. The .butterfly class is still not there.

2. Please, use the CSS I set you with no changes if possible, apart from the height.