OEmbed block behaviour

[allanaaa]

We've tried to fix the oEmbed block so that the width is constrained to our grid or page widths.

In Cozy, the object is having its overflow cut off:

In The Daily, it's not being constrained and is pushing the page width out:

Same in Foundation and in Center Row:

In Freedom and everything else, we get a tiny oembed where the width is constrained correctly and the height is proportional to that. But in Papers the blocks are still loading as big as the original oembed before constraint:

I think this needs to be handled more consistently in the core and not left up to the themes to garble the output.

[kimisgold]

We have a style for this in the core, where we specify that oembed iframes are set to max-width: 100%. Funny enough, Flickr's oembed generates an inline style for max-width that varies depending on the context, sometimes none or 100%. I didn't look closely enough to figure out the logic behind how this embed chooses its max-width, but either way, it overrides our default. I've set the core style to !important for now, which should fix the inconsistency.

[allanaaa]

The Daily:

Center Row:

Papers:

So, still inconsistent. But I'm not sure we're gonna solve this one.

[kimisgold]

Could you check these again, pulling in latest commits from themes and core? I'm seeing what you're seeing as a flicker that corrects into the expected sizing a moment later.

[allanaaa]

Yep, still inconsistent across themes.

[kimisgold]

I'm looking at http://dev.omeka.org/amayer/amayer-s/omeka-s/s/my-omeka-s-site/page/my-grid-page, and I'm seeing a max-width: 196px on the Snow Beauty photo. Flickr's embed does funky calculations that make it hard to test in the browser only, but can we start with removing that constraint? Also what browsers are you using?

I'm trying to replicate this using the same media on my local installation. I have a grid layout with a maximum of 3 columns, and a block group containing "Talk Talk" set to span 2 and "Snow Beauty" set to span 1 with a max-width: 196px. Across Firefox, Chrome, and Safari, I haven't been able to find an instance of that horizontal crop. I've only seen the tall container with the black background in Papers on Chrome.

All these screenshots are in Firefox, and they look consistent across browsers with the exception of the aforementioned outlier in Papers on Chrome.

[allanaaa]

Whoops, didn't know I had stuck a constraint on there. Removed.

I've added a few extra oEmbed blocks lower on the page with different spans but no other settings.

[allanaaa]

Still getting the same thing on Papers vs others, Firefox on a Mac:

[allanaaa]

Yeah, in Safari Papers in fine - just Firefox, and just Papers, is a problem.

[kimisgold]

Funny, I'm seeing in Safari but not Firefox. Either way, it's difficult to trace what's causing the issue due to the nature of iframes and how flickr's embed calculates its dimensions. This also seems a Papers-specific issue at this point, so I'm going to close this one and open one on the theme repo.