adHoc.71site.fr

→ Pourquoi "fabriquer" un IFrame responsive ?

De plus en plus de documents s'affichent sur des smartphones des tablettes, il faut donc s'adapter aux différentes tailles d'écran. Le contenu de l'IFrame doit être responsive également, sinon, cela n'a guère de sens...

Le code utilisé en général pour les IFrames permet déjà, tout au moins en largeur, par le biais des pourcentages d'être adaptatif aux écrans... Certes, mais pas dans la hauteur !

Et cela peut générer des hauteurs disproportionnées du contenu de l'IFrame.

Les adaptations proposées ici sont issues de ce site http://www.armetiz.info/iframe-responsive-design/, dont je remercie l'auteur (Thomas Tourlourat)

Il faut dans un premier temps de placer ce code dans le fichier style.css de votre ou de vos skins. Ou mieux de créer un fichier de style additionnel utilisable dans et déclaré pour toutes vos skins (voir procédure ici). Sur ce site, le fichier additionnel se nomme adHocPlus.css

.iframe-responsive-wrapper {
    position: relative;
}
.iframe-responsive-wrapper .iframe-ratio {
    display: block;
    width: 100%;
    height: auto;
}
.iframe-responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Il faut ensuite connaitre les dimensions de ce que vous voulez afficher.

Par exemple dans les pages suivantes :

■ Pour Flexslider (un diaporama) qui s'affiche à l'aide d'un fichier html (flexslider-iframe.html) placé dans l'IFrame, les images font 800x600px (4/3).

■ Pour les vidéos, font l'une 640x480px (4/3) et l'autre 640x360px (16/9).

J'ai créé des images .gif complètement transparentes de 800x600px (ratio800x600.gif) et de 640x360px (ratio640x360.gif), elles sont placées dans le dossier images d'adHoc. Le poids numérique de ces images est tout à fait négligeable : environ 1ko...

Ces images permettent de fixer le ratio de l'IFrame

Ensuite le code de l'IFrame lui même est assez simple. Je l'ai ici mis dans un div pour le centrer et fixer son occupation à 60%, [div style="margin: auto; width:60%"]...[/div] mais on peut supprimer ce div, l'IFrame occupera alors toute la largeur disponible. Seul l'intérieur est obligatoire.

Ces codes sont à copier-coller dans le code source d'une page, d'une boîte en adaptant le contenu de l'Iframe...

<div style="margin: auto; width:60%">

<div class="iframe-responsive-wrapper">
<img class="iframe-ratio" src="images/ratio800x600.gif" />
<iframe marginheight="0" marginwidth="0" scrolling="no" src="images/flexslider-iframe.html" width="200" height="150" frameborder="0"></iframe>
</div>

</div>

Les valeurs de height (150) et width (200) sont conformes au ratio (4/3) et correspondent à la taille minimum affichée (pour un smartphone, ne prévoyez pas trop grand)

Pour les vidéos, le principe est semblable, voir ci-dessous les codes

<div style="margin: auto; width:60%">

<div class="iframe-responsive-wrapper">
<img class="iframe-ratio" src="images/ratio800x600.gif" />
<iframe allowfullscreen="" src="https://www.youtube.com/embed/m1vxVhvkHtM?rel=0" width="200" height="150" frameborder="0"></iframe>
</div>

</div>

<div style="margin: auto; width:60%">

<div class="iframe-responsive-wrapper">
<img class="iframe-ratio" src="images/ratio640x360.gif" />
<iframe allowfullscreen="" src="https://www.youtube.com/embed/Nak-j7f6dfE?rel=0" width="160" height="90" frameborder="0"></iframe>
</div>

</div>

Pour ce dernier, il est en 16/9, j'ai donc mis height à 90 et width à 160...

Pour plus d'informations et, éventuellement, d'aide pour utiliser cette solution, n'hésitez pas à me contacter.