WordPress.org

Make WordPress Core

Opened 20 months ago

Closed 20 months ago

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

Download all attachments as: .zip

Change History (9)

comment:1 @markjaquith20 months 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 @markjaquith20 months ago

Last edited 20 months ago by markjaquith (previous) (diff)

comment:3 @markjaquith20 months ago

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

@markjaquith20 months ago

comment:4 @ocean9020 months ago

  • Description modified (diff)

comment:5 @nacin20 months ago

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

@nacin20 months ago

Refreshed to remove script-loader changes.

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