[wp-trac] [WordPress Trac] #38046: Wordpress ignores width of gfycat oEmbed

[WordPress Trac]

#38046: Wordpress ignores width of gfycat oEmbed
--------------------------+----------------------
 Reporter:  archon810     |       Owner:
     Type:  defect (bug)  |      Status:  closed
 Priority:  normal        |   Milestone:
Component:  Embeds        |     Version:  4.6.1
 Severity:  normal        |  Resolution:  invalid
 Keywords:                |     Focuses:
--------------------------+----------------------
Changes (by johnbillion):

 * status:  new => closed
 * resolution:   => invalid
 * milestone:  Awaiting Review =>


Old description:

> 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?

New description:

 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?

--

Comment:

 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/38046#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform