Simple: Responsive iframes
Responsive iframe with GuppY 6
GuppY 6 integrates Bootstrap, which makes it possible to simplify the installation of responsive iframes with a line of code.
No more adding lines and lines of code!
To test this, here are some examples that are worth a long explanation!
an example with youtube:
<div style="text-align:center;margin:0 auto;"> <div class="embed-responsive embed-responsive-16by9"><iframe allowfullscreen="" class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/urVfi9Yswaw?rel=0"></iframe></div> </div>
For centering on the page, the iframe is in a container div, the iframe is on the second line, you copy/paste this code into an article, a free box, a news... everything will work.
You want to change the video, it's simple, you have to check the 16by9 ratio (16/9) if it's the same you leave it, then you modify the url of the video urVfi9Yswaw which you replace by yours and you save.
Here is the result:
Another example with a text in pdf, the principle is the same:
<div class="embed-responsive embed-responsive-1by1"><iframe class="embed-responsive-item" src="file/Santiano.pdf" width="100%"></iframe></div>
The ratio is 1by1 (1/1) and the width 100%.
Here is the result:
Finally, here are the different ratios:
21:9 corresponds to 21by9, 16:9 corresponds to 16by9, 4:3 corresponds to 4by3, 1:1 corresponds to 1by1.
As you can see, it's simple and you should have an optimal rendering on tablets and smartphones!