mp4 videos not scaleable in Firefox with latest word upgrade

[Eoinb]

Hi,
Since the wordpress update - the mp4 self hosted videos are not scaling in Firefox. They work in all other browsers.
They used to work in Firefox with previous versions of Wordpress.

See example on test site:
​http://theirmustbeaneasierway.com

[Eoinb]

Linked topic
​https://wordpress.org/support/topic/firefox-video-size-conflict-411?replies=14#post-6802117

[pradeep.sonawane]

Added a CSS fix for #31943 - for video resizing issue on Firefox.

[Eoinb]

Thanks Pradeep,

Where do i place the css ? in my style.css ?

And is it just these lines?

.mejs-container {

clear: both;

+ max-width: 100%;
}

[pradeep.sonawane]

Yes Eoinb. This should work. Add this css in style.css

Thanks,
Pradeep

Replying to Eoinb:

Thanks Pradeep,

Where do i place the css ? in my style.css ?

And is it just these lines?

.mejs-container {
         clear: both;
+        max-width: 100%;
}

[SergeyBiryukov]

Tickets are closed when a commit is made to WordPress trunk.

[Eoinb]

Hi Pradeep,

Ive added the following:

.mejs-container {

clear: both;

+ max-width: 100%;
}

to the test site:
​http://theirmustbeaneasierway.com/

And it stills not working as expected in Firefox :(

[pradeep.sonawane]

Hi Eoinb,

I don't see that css here: ​http://theirmustbeaneasierway.com/wp-content/themes/twentyfifteen/style.css Maybe your changes were not uploaded to this server.

I have realised that the layers also need 100% max-width. So I have updated the css again with a small change. I will upload the patch file shortly. Use that on your server.

Thanks,
Pradeep

[pradeep.sonawane]

Modified the patch again to set 100% max-width to .mejs-layer

[Eoinb]

Hi Pradeep,
I have uploaded that css to the page and still no joy.

You can see it at the bottom of the style.css
​http://theirmustbeaneasierway.com/wp-content/themes/twentyfifteen/style.css

Regards
Eoin

[pradeep.sonawane]

Hi Eoinb,

You have added wrong CSS style.

You just need to add this:

.mejs-container, .mejs-layer {

clear: both;
max-width: 100%;

}

Remove what you have added with the css code above.

Thanks,
Pradeep

[Eoinb]

Hi Pradeep,
Still no joy I'm afraid.

​http://theirmustbeaneasierway.com/wp-content/themes/twentyfifteen/style.css

[pradeep.sonawane]

Looks like it's working now. I checked on my firefox and video is resizing properly. ​http://theirmustbeaneasierway.com/

You may want to clear your browser cache and check again.

Thanks,
Pradeep

[pradeep.sonawane]

@Eoinb: Hope you checked my previous message. That fix is working on firefox. ​http://theirmustbeaneasierway.com/
Try resizing the browser, it resizes the video.

[Eoinb]

Thanks Pradeep,

Yes I got that thank you.
It is resizing in Firefox, Thanks.
I'm getting a deep black box in the background but I think that is css I have somewhere else.

Appreciate the help. Thanks
Eoin

[helen]

Let's please refrain from advising people to directly edit the stylesheet of a default theme - use a plugin such as Jetpack for custom CSS or create a child theme. At this point, the reporter's changes have probably been overwritten by one of the recent updates.