Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#21382 closed defect (bug) (fixed)

Twenty Twelve - videos break outside content in responsive layout

Reported by: chriswallace's profile chriswallace Owned by: lancewillett's profile lancewillett
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

We need to account for video responsiveness within the new Twenty Twelve theme. I would recommend adding fitvids.js to the theme to be able to accurately calculate videos with different sizes. A pure CSS solution would involve setting a fixed aspect ratio, which could cause undesirable results for videos that have a non-widescreen aspect ratio.

http://fitvidsjs.com

Attachments (2)

video.png (408.8 KB) - added by chriswallace 12 years ago.
Video overlaps sidebar.
21382.diff (536 bytes) - added by obenland 12 years ago.

Download all attachments as: .zip

Change History (11)

#1 @nacin
12 years ago

  • Component changed from Themes to Bundled Theme

#2 @lancewillett
12 years ago

  • Milestone changed from Awaiting Review to 3.5
  • Owner set to lancewillett
  • Status changed from new to assigned

I think we can get 90% there with CSS, I'll work with Drew and Konstantin to add a patch for testing and feedback. It'd be really nice to avoid loading any extra JS.

#3 @obenland
12 years ago

  • Cc konstantin@… added

#4 @lancewillett
12 years ago

Chris, I wasn't able to reproduce this one.

Could you tell me how to repeat it? What content to use (video URL and how you entered it into the post) and your browser version and OS.

Screenshots help, too.

#5 @drewstrojny
12 years ago

  • Cc dstrojny@… added

#6 @chriswallace
12 years ago

The video I had an issue with was a Vimeo video, not embedded with oEmbed. This was embedded as an iframe video:

<iframe src="http://player.vimeo.com/video/40912440?title=0&amp;byline=0&amp;portrait=0" frameborder="0" width="620" height="350"></iframe>

This is on the latest version of Chrome.

Fitvids.js (or a similar PHP solution) is perfect for this problem because it looks for iframes with vimeo.com in the src attribute. CSS can achieve a similar effect, but it's impossible to scale the height based on the width.

Version 4, edited 12 years ago by chriswallace (previous) (next) (diff)

@chriswallace
12 years ago

Video overlaps sidebar.

@obenland
12 years ago

#7 follow-up: @obenland
12 years ago

  • Keywords has-patch added; needs-patch removed

Reproduced and fixed in 21382.diff. Thank you @chriswallace!

Added object and embed for completeness (mimicked from Twenty Eleven).

#8 in reply to: ↑ 7 @lancewillett
12 years ago

Replying to obenland:

Reproduced and fixed in 21382.diff. Thank you @chriswallace!

Added object and embed for completeness (mimicked from Twenty Eleven).

The block was already there: http://core.trac.wordpress.org/browser/trunk/wp-content/themes/twentytwelve/style.css#L290 -- just needs iframe added.

We shouldn't limit the selector to entry-content because we want comment videos to have the same behavior.

#9 @lancewillett
12 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In [21408]:

Twenty Twelve: make sure embeds and videos don't overflow their containers, and add iframe styles to all embeds, videos, and objects. Fixes #21382.

Props chriswallace and obenland for troubleshooting.

Note: See TracTickets for help on using tickets.