WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 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 Owned by: 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 2 years ago.
24896.2.diff (823 bytes) - added by nacin 2 years ago.
Refreshed to remove script-loader changes.

Download all attachments as: .zip

Change History (9)

comment:1 @markjaquith2 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

comment:2 @markjaquith2 years ago

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

comment:3 @markjaquith2 years ago

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

@markjaquith2 years ago

comment:4 @ocean902 years ago

  • Description modified (diff)

comment:5 @nacin2 years ago

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

@nacin2 years ago

Refreshed to remove script-loader changes.

comment:6 @nacin2 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.

comment:7 @nacin2 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.