[wp-trac] [WordPress Trac] #34928: Making wordpress embeds responsive is a better idea

[WordPress Trac]

#34928: Making wordpress embeds responsive is a better idea
-------------------------+------------------------------
 Reporter:  Niresh12495  |       Owner:
     Type:  enhancement  |      Status:  new
 Priority:  normal       |   Milestone:  Awaiting Review
Component:  Embeds       |     Version:  4.4
 Severity:  normal       |  Resolution:
 Keywords:               |     Focuses:
-------------------------+------------------------------

Comment (by swissspidy):

 Hi there, thanks for submitting this ticket and welcome to trac!

 The new embeds in WordPress 4.4 ''are'' already responsive. There are two
 reasons `width="600" height="400"` (or whatever values) is used for the
 iframe:

 * It conforms to the [http://oembed.com/ oEmbed specification] which
 requires using pixel values instead of percentages. The pixel value should
 match the value used in the embed code, of course.
 * A site requesting the embed code will pass the desired width (usually
 `$content_width`), which will then get used as the `width` attribute. That
 means the embedded content will always fit your `$content_width`.
 * According to the [http://www.w3.org/TR/2011/WD-html5-20110525/the-map-
 element.html#attr-dim-width HTML5 specification] the width attribute
 should contain a value in pixels

 We use JavaScript to dynamically change the iframe's height when resizing
 the window. It's recommended that you use something along the lines of

 {{{#!css
 embed, iframe, object, video {
     max-width: 100%;
 }
 }}}


 to make the resizing work.

 Note that the maximum width is still the one set in the `width` property,
 which is `600` by default.

 So the "proper" way of using a flexible width would probably be to remove
 the `width` attribute and use `style="width: 100%;`.

 Not sure if this should be done though. Sites using oEmbed will pass the
 right width, other sites are commonly using solutions like FitVids or
 Fluidvids. Setting the width to 100% could also break many websites,
 resulting in huge embeds.

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