Making wordpress embeds responsive is a better idea

[Niresh12495]

Wordpress Embedding is a nice feature introduced with 4.4 upgrade any how it is not responsive here is a basic embed code

<blockquote class="wp-embedded-content"><a href="http://www.owlreporter.com/google/116.html">How to Quickly Clear DNS Cache on Mac, Windows and Linux</a></blockquote>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
		!function(a,b){"use strict";function c(){if(!e){e=!0;var a,c,d,f,g=-1!==navigator.appVersion.indexOf("MSIE 10"),h=!!navigator.userAgent.match(/Trident.*rv:11\./),i=b.querySelectorAll("iframe.wp-embedded-content"),j=b.querySelectorAll("blockquote.wp-embedded-content");for(c=0;c<j.length;c++)j[c].style.display="none";for(c=0;c<i.length;c++)if(d=i[c],d.style.display="",!d.getAttribute("data-secret")){if(f=Math.random().toString(36).substr(2,10),d.src+="#?secret="+f,d.setAttribute("data-secret",f),g||h)a=d.cloneNode(!0),a.removeAttribute("security"),d.parentNode.replaceChild(a,d)}else;}}var d=!1,e=!1;if(b.querySelector)if(a.addEventListener)d=!0;if(a.wp=a.wp||{},!a.wp.receiveEmbedMessage)if(a.wp.receiveEmbedMessage=function(c){var d=c.data;if(d.secret||d.message||d.value)if(!/[^a-zA-Z0-9]/.test(d.secret)){var e,f,g,h,i,j=b.querySelectorAll('iframe[data-secret="'+d.secret+'"]'),k=b.querySelectorAll('blockquote[data-secret="'+d.secret+'"]');for(e=0;e<k.length;e++)k[e].style.display="none";for(e=0;e<j.length;e++)if(f=j[e],c.source===f.contentWindow){if(f.style.display="","height"===d.message){if(g=parseInt(d.value,10),g>1e3)g=1e3;else if(200>~~g)g=200;f.height=g}if("link"===d.message)if(h=b.createElement("a"),i=b.createElement("a"),h.href=f.getAttribute("src"),i.href=d.value,i.host===h.host)if(b.activeElement===f)a.top.location.href=d.value}else;}},d)a.addEventListener("message",a.wp.receiveEmbedMessage,!1),b.addEventListener("DOMContentLoaded",c,!1),a.addEventListener("load",c,!1)}(window,document);
//--><!]]>
</script><iframe sandbox="allow-scripts" security="restricted" src="http://www.owlreporter.com/google/116.html/embed/" width="600" height="400" title="Embedded WordPress Post" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe>

to simply make it responsive a minor change is required

<blockquote class="wp-embedded-content"><a href="http://www.owlreporter.com/google/116.html">How to Quickly Clear DNS Cache on Mac, Windows and Linux</a></blockquote>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
		!function(a,b){"use strict";function c(){if(!e){e=!0;var a,c,d,f,g=-1!==navigator.appVersion.indexOf("MSIE 10"),h=!!navigator.userAgent.match(/Trident.*rv:11\./),i=b.querySelectorAll("iframe.wp-embedded-content"),j=b.querySelectorAll("blockquote.wp-embedded-content");for(c=0;c<j.length;c++)j[c].style.display="none";for(c=0;c<i.length;c++)if(d=i[c],d.style.display="",!d.getAttribute("data-secret")){if(f=Math.random().toString(36).substr(2,10),d.src+="#?secret="+f,d.setAttribute("data-secret",f),g||h)a=d.cloneNode(!0),a.removeAttribute("security"),d.parentNode.replaceChild(a,d)}else;}}var d=!1,e=!1;if(b.querySelector)if(a.addEventListener)d=!0;if(a.wp=a.wp||{},!a.wp.receiveEmbedMessage)if(a.wp.receiveEmbedMessage=function(c){var d=c.data;if(d.secret||d.message||d.value)if(!/[^a-zA-Z0-9]/.test(d.secret)){var e,f,g,h,i,j=b.querySelectorAll('iframe[data-secret="'+d.secret+'"]'),k=b.querySelectorAll('blockquote[data-secret="'+d.secret+'"]');for(e=0;e<k.length;e++)k[e].style.display="none";for(e=0;e<j.length;e++)if(f=j[e],c.source===f.contentWindow){if(f.style.display="","height"===d.message){if(g=parseInt(d.value,10),g>1e3)g=1e3;else if(200>~~g)g=200;f.height=g}if("link"===d.message)if(h=b.createElement("a"),i=b.createElement("a"),h.href=f.getAttribute("src"),i.href=d.value,i.host===h.host)if(b.activeElement===f)a.top.location.href=d.value}else;}},d)a.addEventListener("message",a.wp.receiveEmbedMessage,!1),b.addEventListener("DOMContentLoaded",c,!1),a.addEventListener("load",c,!1)}(window,document);
//--><!]]>
</script><iframe sandbox="allow-scripts" security="restricted" src="http://www.owlreporter.com/google/116.html/embed/" width="100%" height="400" title="Embedded WordPress Post" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe>

Change the width style to 100% instead of 600px

width="100%" height="400" 

i have implemented this responsive in my forum site just follow the link below
​http://forums.owlreporter.com/topic/2-how-to-quickly-clear-dns-cache-on-mac-windows-and-linux/

[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 ​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 ​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

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.

[afercia]

Yep, width and height here are HTML attributes, not CSS properties and as such they accept only valid non-negative integers as values (no "px" or "%" or other unit measures). Of course, they can be overridden by external or inline CSS.