[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       |   Keywords:
  Focuses:               |
-------------------------+-----------------------------
 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/

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