ladislav.soukup

<p>This is simple shortcode to embed responsive iframe to your post. Iframe will hold the specified ratio when page is rescaled.</p>
<p>[rframe ratio=”16×9″ src=”http://flixel.com/player/snqi608mlq1h98w5p9jy” width=”60%” /]</p>
<h4>How it Works</h4>
<p>DIV block with specified width is creted. Inside is transparent PNG file with specifed ratio scaled to 100% width and height set to auto. This image will scale the main DIV to size with correct ratio.<br />
Embeded IFRAME is then set to fill the wrapper DIV, so it is scaled with the image.<br />
Image is created on the fly via PHP and inserted as inline image directly to src attribute of img tag.</p>
<h4>Credit</h4>
<p>Thanks to Masau ( http://jsfiddle.net/Masau/7WRHM/ ) for the “trick”.</p>


SB-ResponseFrame

This is simple shortcode to embed responsive (fixed-ratio) iframes

INN Labs

<p>Pym.js Embeds provides shortcode and Gutenberg block wrappers for embedding responsive iframes using <a href="http://blog.apps.npr.org/pym.js/" rel="nofollow ugc">Pym.js</a>, developed by the NPR Visuals Team. Embedded content resizes vertically to match its container’s width.</p>
<p>AMP compatibility is provided by the <a href="https://wordpress.org/plugins/amp/" rel="ugc">official AMP plugin</a>.</p>
<h3>Pym.js Resources from NPR</h3>
<p>You may also want to look at NPR’s Pym.js resources:</p>
<ul>
<li><a href="http://blog.apps.npr.org/pym.js/" rel="nofollow ugc">Pym.js homepage</a></li>
<li><a href="https://github.com/nprapps/pym.js/" rel="nofollow ugc">Pym.js repo on GutHub/nprapps</a></li>
</ul>


Pym.js Embeds

A WordPress block and shortcode for embedding iframes that are responsive horizontally and vertically, using the NPR Visuals Team's Pym.js.

SB-ResponseFrame vs Pym.js Embeds