Embedded video's .wp-video block is not responsive yet

[Surbma]

Hi,

in the new 4.0 version media embeds are responsive, but the wrap of the media, the .wp-video div is not responsive yet. It still have the original height, so even if the video itself is responsive, the div block around it has its original height.

The problem is, that the .wp-video block has a style with a fixed height, even if the block displays on a smaller screen.

Please fix this little "bug", as it is annoying on the front end.

[greenshady]

I was starting to get reports from theme users about this. It looks like some changes in #29110 has messed this up from what I can tell. Video embeds were previously responsive. The outter div.wp-video container's height is causing this. I haven't found a workaround yet.

[jasonlcrane]

This change to mediaelement.js (​https://github.com/johndyer/mediaelement/commit/3db79d078ca21dade4319d87247e34c23847f1cf) requires the .wp-video element to have a height, which @wonderboymusic updated with this change: https://core.trac.wordpress.org/browser/trunk/src/wp-includes/media.php?rev=29457

My fix has been to change the height back to auto with javascript in the mediaelement success callback (https://core.trac.wordpress.org/browser/trunk/src/wp-includes/js/mediaelement/wp-mediaelement.js). I'm registering my own version of that file already for other reasons.

I will attach a patch with my fix to at least get the conversation started. I don't know that this is necessarily a good long term fix, but it's where I ended up for now. This is my first time submitting a patch, please let me know if I'm missing anything in that process. I've tested it on 4.0 with multiple themes.

[greenshady]

Setting the height to auto works fine for scaling the video down. However, if you resize your browser window to a smaller width, then resize to a larger width, the height doesn't correctly adjust.

[jasonlcrane]

Replying to greenshady:

Setting the height to auto works fine for scaling the video down. However, if you resize your browser window to a smaller width, then resize to a larger width, the height doesn't correctly adjust.

Good point. This also only works when one video is on the page. I'm dealing with this on a site right now so I'll update if I have anything better.

[wonderboymusic]

Fixed in [30082]