WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#29887 closed enhancement (fixed)

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

Reported by: Surbma Owned by:
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.0
Component: Embeds Keywords:
Focuses: Cc:

Description

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.

Attachments (1)

29887.patch (606 bytes) - added by jasonlcrane 6 years ago.

Download all attachments as: .zip

Change History (10)

#1 @greenshady
6 years ago

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.

#2 @jasonlcrane
6 years ago

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.

@jasonlcrane
6 years ago

#3 @jasonlcrane
6 years ago

  • Keywords has-patch needs-testing added

#4 follow-up: @greenshady
6 years ago

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.

#5 in reply to: ↑ 4 @jasonlcrane
6 years ago

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.

#6 @jasonlcrane
6 years ago

  • Keywords has-patch needs-testing removed

#8 @wonderboymusic
6 years ago

  • Resolution set to fixed
  • Status changed from new to closed

#9 @SergeyBiryukov
6 years ago

  • Milestone changed from Awaiting Review to 4.1
Note: See TracTickets for help on using tickets.