Make WordPress Core

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#24896 closed defect (bug) (fixed)

MediaElement.js audio/video fallback links and audio player do not render well in iOS

Reported by: nacin's profile nacin Owned by: nacin's profile nacin
Milestone: 3.6 Priority: normal
Severity: normal Version: 3.6
Component: Media Keywords: has-patch upstream
Focuses: Cc:

Description (last modified by ocean90)

From davidjlaietta in #23798:

Testing today at WCSF dev day, noticed that on iOS mobile browsers, fallback me-cannotplay div breaks site layout because it has hardcoded height and width values. See attached screenshots for iOS Chrome and Safari. Any default theme has this issue.

If we change the hardcoded height and width of the me-cannotplay element to auto, issue is resolved.

iOS Chrome with webM: http://core.trac.wordpress.org/attachment/ticket/23798/2013-07-28%2018.02.02.png

iOS Safari with webM: http://core.trac.wordpress.org/attachment/ticket/23798/2013-07-28%2018.02.28.png

Patch against the minified MediaElement.js source: ticket:23798:23798.3.diff

Additionally, the audio player renders too wide, breaking the layout.

Attachments (2)

24896.diff (1.6 KB) - added by markjaquith 11 years ago.
24896.2.diff (823 bytes) - added by nacin 11 years ago.
Refreshed to remove script-loader changes.

Download all attachments as: .zip

Change History (9)

#1 @markjaquith
11 years ago

  • Description modified (diff)
  • Summary changed from MediaElement.js audio fallback links do not render well on iOS to MediaElement.js audio/video fallback links and audio player do not render well in iOS

#2 @markjaquith
11 years ago

Last edited 11 years ago by markjaquith (previous) (diff)

#3 @markjaquith
11 years ago

24896.diff fixes the audio (working player) width issue, as well as the me-cannotplay video and audio width issue.

@markjaquith
11 years ago

#4 @ocean90
11 years ago

  • Description modified (diff)

#5 @nacin
11 years ago

Should that be max-width: 100%, or width: 100%?

@nacin
11 years ago

Refreshed to remove script-loader changes.

#6 @nacin
11 years ago

  • Owner set to nacin
  • Resolution set to fixed
  • Status changed from new to closed

In 24948:

Set audio player to width: 100% and avoid breaking the layout in iOS when we fall back to a link.

props markjaquith, davidjlaietta.
fixes #24896.

#7 @nacin
11 years ago

In 24949:

Set audio player to width: 100% and avoid breaking the layout in iOS when we fall back to a link.

Merges [24948] to the 3.6 branch.

props markjaquith, davidjlaietta.
fixes #24896.

Note: See TracTickets for help on using tickets.