Handle height/width for videos about wp-core-media-widgets

[kopepasah]

Since we have the width and height of the video before it is rendered on the page, we can use PHP to calculate a padding we can add to the top of the .wp-video class and add a small amount of styles to accommodate for the changes.

We would only want to do this when MediaElement.js is not used and should not affect the output when it (MediaElement.js) is enabled again.

Alternatively, we can also do this post-render with JavaScript (but that seems unnecessary since we already have the dimensions).

As a plus, this would also make the video responsive in the process. 🤓

[westonruter]

@kopepasah do we have the width and height of the video? I don't think we do and that's the root of the problem here. There's no utility in WordPress for obtaining the dimensions of an uploaded video as far as I know. That being said, an oEmbed response will include the width/height so we can actually add the width/height to the model props. But, we don't know the dimensions of the resulting destination where the video is going to be placed. This is why in the first screenshot you can see the video is overflowing the sidebar container. So that's why I was thinking of some max-width style, but this won't preserve the original aspect ratio when a height is also defined.

[kopepasah]

@westonruter I should have wrote, "Since we have the width and height of the embed". We can use those fit the video within its container, as described above.

[westonruter]

@kopepasah but I don't think we have the width and height of the embed.

[melchoyce]

Related: https://core.trac.wordpress.org/ticket/31139

[melchoyce]

What if the video always had a height of 253 x 142 (scaled down from 512 x 288 to fit the customizer sizebar)? Anything 4:3, or using non-standard dimensions, can have black bars around the edges.

[westonruter]

The problem is fitting a video in the frontend sidebar, not the customizer controls pane. I think the combination of #124 and #116 (changing preload to metadata) will resolve the issue mostly.

[westonruter]

This is still not working right for external hosted embeds.

Vimeo:

YouTube:

[kopepasah]

@westonruter sorry for the delayed reply.

I am still getting an overflow in the <video> element. Was your commits supposed to address this element as well?

[westonruter]

@kopepasah I'm not getting overflow anymore. Where do you see it?

[westonruter]

See also padding-bottom hack in WordPress/gutenberg#721

[kopepasah]

@westonruter my mistake, this is working as expected.