Simple : Iframes responsives
Iframe responsive avec GuppY 6
GuppY 6 intègre Bootstrap, ce qui permet de simplifier la mise en place d 'iframes responsives avec une ligne de code.
Finis les ajouts de lignes et de lignes de code !!!
Pour tester voici des exemples qui valent une longue explication.
un exemple avec 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>
Pour le centrage sur la page, l 'iframe est dans un div conteneur, l 'iframe est sur la seconde ligne, vous copiez / collez ce code dans un article, une boite libre, une nouvelle... tout va fonctionner.
Vous voulez changer la vidéo, c' est simple, vous devez vérifier le ratio 16by9 (16/9) si c'est le même vous le laissez, ensuite vous modifiez l' url de la vidéo urVfi9Yswaw que vous remplacez par la vôtre et vous enregistrez.
Voici le résultat :
Un autre exemple avec un texte en pdf, le principe est le même:
<div class="embed-responsive embed-responsive-1by1"><iframe class="embed-responsive-item" src="file/chants_de_marins/chants_de_marins_O-S/Santiano.pdf" width="100%"></iframe></div></pre>
Le ratio est 1by1 (1/1) et la largeur 100%.
Voici le résultat:
Pour terminer, voici les différents ratios:
21/9 correspond à 21by9, 16/9 correspond à 16by9, 4/3 correspond à 4by3, 1/1 correspond à 1by1.
Comme vous pouvez le voir, c' est simple et vous devez avoir un rendu optimal sur tablettes et smartphones !!!