Opened 10 years ago
Closed 10 years ago
#30078 closed defect (bug) (fixed)
Video dimensions in MediaElement
Reported by: | azaozz | Owned by: | wonderboymusic |
---|---|---|---|
Milestone: | 4.1 | Priority: | normal |
Severity: | normal | Version: | 4.0 |
Component: | Media | Keywords: | |
Focuses: | rtl | Cc: |
Description
When we add a video (both on the front-end and in wpView), we add inline style with width and height on the wrapper div. Then we add max-width: 100%; height: auto;
in wp-mediaelement.css, however the height is already overridden.
That results in empty space under the video when max-width comes into effect on the wrapper div.
Attachments (3)
Change History (10)
#3
@
10 years ago
That definitely solves the general case, but there's the edge case I mention above. If that's OK, I'm happy to upload a patch (or you can just do it — just delete [these three lines](https://github.com/WordPress/WordPress/blob/master/wp-includes/media.php#L1880).
#4
@
10 years ago
I had to add the inline height due to some MEjs weirdness in the last release - since then, I had a pull request accepted upstream that fixed some of the problems. Any solution needs to be tested across all browsers and all video file types.
#5
@
10 years ago
- Owner set to wonderboymusic
- Resolution set to fixed
- Status changed from new to closed
In 30082:
OK, I did some looking into this. This is happening because the inner
video
height is shrinking (width & height changed with JS in mediaelement.js) while the outerdiv.wp-video
container has the fixed height. That creates the big gap of whitespace underneath.One potential solution is to remove the inline height style — this works correctly if we: (1) start with a large screen size, then shrink the width so the max-width rule applies; (2) don't change the screen width at all. However, this fails if we start with a small screen size (where the max-width rule applies) and then expand the window width so it no longer does.
In the failure case, the width of the video stays correct, but the height is fixed at the original, shorter height (skewing the video with an incorrect aspect ratio). This happens because for some reason mediaelement.js does not change the height if it loads as less then the auto height from the set width. I'm attaching two screenshots below that show this happening. This may be a bug upstream in mediaelement.js, but I don't know the code well enough to comment on that.