WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#40788 closed defect (bug) (duplicate)

Media elements video container is 1 px to wide

Reported by: BackuPs Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.8
Component: General Keywords:
Focuses: Cc:
PR Number:

Description

I just tested the new video widget in wp 4.8 (nightly bleed) and i discovered that the video container has inline css which is actually 1px to wide. Tested with different video's. All the same issue. See image below of video widget in footer.

https://cloud.githubusercontent.com/assets/6078370/26143073/a4424090-3ae3-11e7-97d3-034bc82e7c76.png

Tested with 20-seventeen and other themes. All the same issue.

In the admin area it is ok. But in the front of the website its not and the 1px is added. See image of admin area.

https://cloud.githubusercontent.com/assets/6078370/26143134/dfe2b206-3ae3-11e7-8cc1-b8a91396a1f4.png

Any suggestion?

https://cloud.githubusercontent.com/assets/6078370/26143275/98583f72-3ae4-11e7-8b29-86c67bb8044f.png

On mobile the issue shifts to the left of the video

https://cloud.githubusercontent.com/assets/6078370/26143498/806702a8-3ae5-11e7-9cfb-0434fb0d4620.png

If i then manually adjust the width by 1px it is ok again.

https://cloud.githubusercontent.com/assets/6078370/26143574/db1bfa82-3ae5-11e7-9050-5f54e5088a4c.png

at a certain resize point there are two black borders.

https://cloud.githubusercontent.com/assets/6078370/26143714/58d03862-3ae6-11e7-8c7d-26109132f0e0.png

If i then adjust it by 1px then its ok again.

https://cloud.githubusercontent.com/assets/6078370/26144043/98670cb6-3ae7-11e7-8ffd-d001aea4c664.png

Change History (5)

#1 @rafa8626
2 years ago

@BackuPs I have found a minor issue and it will be fixed on 4.1.2 version. The nightly build uses 2.22.0 and I won't attempt to fix it there since it's more complicated than just upgrading. The answer for this is in https://github.com/mediaelement/mediaelement/issues/2220#issuecomment-302279529. Once you confirm that it is fixed, you can close this issue if you can

#2 @BackuPs
2 years ago

@rafa8626

I can confirm that replacing the mediaelement-and-player.min.js file in the wp-includes/js/mediaelement folder with MEJS build version 4.1.1 or higher fixes the issue.

Now the question is how do we get the WP Core Team to adapt this fix and when....

Thank you for resolving this.

To fix the issue by custom css when not replacing the js file also works but its not as good as the replacement of the js file with the one from the latest mejs build (version 4.1.1 or higher).

.mejs-container.mejs-video {
    background: transparent;
    min-width: 0;
}
Last edited 2 years ago by BackuPs (previous) (diff)

#3 @BackuPs
2 years ago

I think it is also possible to fix the MEJS v222 file WP is using so the layout of the players in the front does not change by adding a line of code at line 3038 in the original v222 mediaelement-and-player.js

if (t.isVideo) {parentWidth=parentWidth-1;}

So you get this.

https://cloud.githubusercontent.com/assets/6078370/26192590/ae9b06e2-3bb2-11e7-9324-67efa3486d64.png

Then just minify the js file to mediaelement-and-player.min.js

works for me ! :-)

Update: However this creates a weird issue when a plugin is using new MEJS player.min file when a video in the page content is using the new code and the sidebar or footer is using the old js.

Then the video in the sidebar or footer has incorrect height.

So better WP updates to the latest MEJS file !

Last edited 2 years ago by BackuPs (previous) (diff)

#4 @swissspidy
2 years ago

#40846 was marked as a duplicate.

#5 @swissspidy
2 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

I can confirm that replacing the mediaelement-and-player.min.js file in the wp-includes/js/mediaelement folder with MEJS build version 4.1.1 or higher fixes the issue.

Updating MediaElement.js is being handled in #39686.

I'm therefore closing this ticket as a duplicate.

Note: See TracTickets for help on using tickets.