WordPress.org

Make WordPress Core

Opened 22 months ago

Closed 22 months ago

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

Download all attachments as: .zip

Change History (9)

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

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

comment:3 @markjaquith22 months ago

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

@markjaquith22 months ago

comment:4 @ocean9022 months ago

  • Description modified (diff)

comment:5 @nacin22 months ago

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

@nacin22 months ago

Refreshed to remove script-loader changes.

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