Media elements video container is 1 px to wide

[BackuPs]

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.

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.

Any suggestion?

On mobile the issue shifts to the left of the video

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

at a certain resize point there are two black borders.

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

[rafa8626]

@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

[BackuPs]

@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;
}

[BackuPs]

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.

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 !

[swissspidy]

#40846 was marked as a duplicate.

[swissspidy]

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.