`responsive` can make the video break out of the bounding box of the parent element vertically

[dyc3]

Expected Behavior

I expect the video player to remain within the bounding box of it's parent.

Actual Behavior

When responsive: true is provided as an embed option, if the parent element's height is smaller than the video's height, the video iframe will break out of the bottom border of the parent.

Steps to Reproduce

See my codepen: https://codepen.io/dyc3/pen/rNoObBN

My current workaround is to not use this option, and use ResizeObserver to manually adjust the iframe's width and height to fit the parent.

[jdreetz]

@dyc3 is your goal to crop the video or resize it so the height is 100% and there's extra white space on the left and right sides of the video?

[dyc3]

The latter, to resize the video so the height is 100% the parent, with space on the left and right.

[jdreetz]

@dyc3 are you able to use the iframe version of the embed? Seems like that would prevent the video from expanding beyond the bounds of the container: https://codepen.io/jdreetz-vimeo/pen/qBLNKVP

[dyc3]

My application uses the vimeo library exactly how I've set up the codepen. More verbosely, see here: https://github.com/dyc3/opentogethertube/blob/master/client/src/components/players/VimeoPlayer.vue

It specifically lets the vimeo library create and manage the iframe, rather than supplying one. The library renders an iframe wrapped in a div that looks like this:

<div style="padding:75.95% 0 0 0;position:relative;">
    <iframe 
        src="https://player.vimeo.com/video/28941097?app_id=122963" 
        frameborder="0" 
        allow="autoplay; fullscreen; picture-in-picture" 
        style="position:absolute;top:0;left:0;width:100%;height:100%;" 
        title="A Trip to the Moon" 
        data-ready="true"
    ></iframe>
</div>

I've seen this trick before: it's a hacky workaround to get the child element (the iframe) to have a specific aspect ratio while remaining responsive to the size of the parent (the div).

Is there a version that doesn't use iframes? I've found that <video> seems to play way nicer with css.

[jdreetz]

@dyc3 I wanted to clarify your requirement: is the size of the container for the embed going to be a fixed size (like in the Codepen) or dynamic size (like in the snippet in your previous post)?

Is there a version that doesn't use iframes? I've found that

We only support iframe embeds currently with our SDK.

[dyc3]

In my application, the parent element has width: 100%; height: 100%;. Does that count as dynamic?

The snippet here is the HTML that gets rendered by the vimeo-player library right now, as i have it in the codepen. It's not what my application does.

Would you mind elaborating more on what you're after? The issue seems clear to me, but maybe I'm missing some of the nuances here.

[jdreetz]

In my application, the parent element has width: 100%; height: 100%;. Does that count as dynamic?

The snippet here is the HTML that gets rendered by the vimeo-player library right now, as i have it in the codepen. It's not what my application does.

Would you mind elaborating more on what you're after? The issue seems clear to me, but maybe I'm missing some of the nuances here.

Thanks for followwing up with the additional answers @dyc3 . I was mostly trying to see if there was any better workarounds we could provide, but I think it's clear this is an issue we need to address in the library itself. I've filed a ticket with our team to look into the issue. We'll let you know when it's been prioritized. Thanks again for bringing this to our attention!