WordPress ignores width of gfycat oEmbed

[archon810]

Hi,

Wordpress currently supports a number of providers explicitly via oEmbed ​https://codex.wordpress.org/Embeds, with gfycat (a popular GIF site) support working using oEmbed discovery (as of WP 4.4).

The problem is, there doesn't seem to be a way to specify or just have WP honor the provided width parameter.

Here's a sample gfycat: ​https://gfycat.com/LegitimateComplexHoiho. The oembed call: ​https://api.gfycat.com/v1/oembed?url=https://gfycat.com/LegitimateComplexHoiho.

The value:

{
  "version": "1.0",
  "type": "video",
  "provider_name": "https://gfycat.com",
  "width": 228,
  "height": 228,
  "title": "",
  "html": "<div style='position:relative;padding-bottom:calc(100% / 1.00)'><iframe src='https://gfycat.com/ifr/LegitimateComplexHoiho' frameborder='0' scrolling='no' width='100%' height='100%' style='position:absolute;top:0;left:0;' allowfullscreen></iframe></div>"
}

It's got a width of 212 pixels, but WP embeds it using the full viewport width, which looks huge (mine is 668px ​http://i.imgur.com/jkmAQjN.png). There could be responsive considerations here, but the image should never be larger than its 100% size, irrespective of the container.

Furthermore, even if I wrap the url in [embed] tags and add a width=212 parameter manually, it gets completely ignored, and the result is the same.

What should happen ideally is by default embeds are max 100% of their absolute size, responsiveness still works, and so do the width/height parameters to the shortcode.

Any ideas how to fix it?

[jorbin]

The iFrame is set to have 100% width and as that is the embedded content, I tend to think that should be respected. the oembed spec doesn't seem to address this.

cc/ @swissspidy @johnbillion @wonderboymusic as embed maintainers.

[swissspidy]

The width attribute stands for the width in pixels required to display the HTML. It's not a value the oEmbed consumer must enforce. Since the provider declares a width of 100% (which is not allowed by the HTML spec) instead of the pixel value in the embed HTML, the output is correct in my eyes.

I'd suggest filtering the oEmbed output in a plugin to adjust the HTML based on the width attribute or set a fixed width using CSS.

[johnbillion]

This is indeed something that Gfycat needs to correct on their end. There should be no assumption that the width of the container element surrounding the iframe matches that of the oEmbed's width property.

[archon810]

I pinged Gfycat support and API teams because as far as I can tell, this issue still persists.