Twenty Thirteen: Embedded media positioned incorrectly at <999px breakpoints

[sabreuse]

At tablet and smaller sizes, embedded media are shifted offscreen to the left rather than being centered in the layout. Patch attached.

props to alun for reporting the issue and the fix here: ​http://wordpress.org/support/topic/twenty-thirteen-responsive-layout-for-entry-media?replies=1

[lancewillett]

@sabreuse Could you help us out by attaching before and after screenshots? Also, browser info is always helpful for repeating the bugs.

[sabreuse]

Replying to lancewillett:

@sabreuse Could you help us out by attaching before and after screenshots? Also, browser info is always helpful for repeating the bugs.

Sure thing -- sorry I didn't think of it before:

Currently, seeing this on both Chrome & Firefox:

After patch:

[obenland]

Sabreuse's patch went in the right direction, but we need a bit more verbose. I only tested the patch with images, have not had the chance to test it with videos.

We need to account for all screen sizes, with and w/o a sidebar, LTR and RTL.

[lancewillett]

In 23964:

Twenty Thirteen: better handling of media in main content area, accounting for a sidebar and all viewport width possibilities. Props sabreuse and obenland, see #23955.

[lancewillett]

Leaving this ticket open for more testing.

[obenland]

Re-introduce max-widths for audio post formats. There was a reason we had them.

[lancewillett]

Seems somewhere along the line video embeds, like YouTube URLs stopped being filtered to the correct width of 724, with twentythirteen_content_width() that fires on 'template_redirect'. It's broken on the index view or any view where the video post isn't the first in the results. (Works OK on single.)

[lancewillett]

In 23971:

Twenty Thirteen: reinstate Audio post format max-width layout handling, lost in r23964. See #23955, props obenland.

[lancewillett]

In 23972:

Twenty Thirteen: adjust content_width value for video shortcodes in video post formats and on attachment templates. See #23955, props obenland.

[obenland]

Make sure to only alter the width on the frontend.

[obenland]

.4 restricts the new width to the frontend.

[wonderboymusic]

if you have a giant video and then filter only width, and it happens to equal content width, the aspect ratio is going to get effed up - I think constraints need to happen in the shortcode, which every video passes through. My patch only works if the 2013 filter isn't there. Let's discuss.

My patch is necessary anyways to constrain giant videos from rendering bigger than $content_width in the admin and on the front end

[wonderboymusic]

23955.6.diff​​ fixes TwentyThirteen as well

[wonderboymusic]

23955.7.diff​​ uses $content_width instead of hard-coding 724

[wonderboymusic]

use .6.diff instead of .7.diff - $content_width is dynamic in some cases

[markjaquith]

Needs refresh.

What exactly is the problem at this juncture? How can I test it to verify that the patch fixes it?

[markjaquith]

Nevermind, doesn't need refresh.

[markjaquith]

In 23989:

Constrain large videos from rendering bigger than $content_width on both frontend and backend.

props wonderboymusic. fixes #23955.