WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#31943 closed defect (bug) (worksforme)

mp4 videos not scaleable in Firefox with latest word upgrade

Reported by: Eoinb Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.1.1
Component: Media Keywords: has-patch
Focuses: Cc:

Description

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

Attachments (2)

31943.diff (270 bytes) - added by pradeep.sonawane 5 years ago.
Added a CSS fix for #31943 - for video resizing issue on Firefox.
31943.2.diff (302 bytes) - added by pradeep.sonawane 5 years ago.
Modified the patch again to set 100% max-width to .mejs-layer

Download all attachments as: .zip

Change History (17)

@pradeep.sonawane
5 years ago

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

#2 @pradeep.sonawane
5 years ago

  • Keywords has-patch added

#3 follow-up: @Eoinb
5 years ago

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%;
}
Last edited 5 years ago by SergeyBiryukov (previous) (diff)

#4 in reply to: ↑ 3 @pradeep.sonawane
5 years ago

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

#5 @pradeep.sonawane
5 years ago

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

#6 @SergeyBiryukov
5 years ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

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

#7 @Eoinb
5 years ago

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 :(

#8 @pradeep.sonawane
5 years ago

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
5 years ago

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

#9 @Eoinb
5 years ago

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

#10 @pradeep.sonawane
5 years ago

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

#12 follow-up: @pradeep.sonawane
5 years ago

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

#13 in reply to: ↑ 12 @pradeep.sonawane
5 years ago

  • Resolution set to worksforme
  • Status changed from reopened to closed

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

#14 @Eoinb
5 years ago

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

#15 @helen
5 years ago

  • Milestone Awaiting Review deleted

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.

Note: See TracTickets for help on using tickets.