En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Informations Iframes responsives
 
 
 
    Imprimer la page...
    Imprimer la section...

Informations Iframes responsives

IFrame responsive design

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é 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

Quelques liens pour s'en rendre compte (les contenus s'ouvrent dans une nouvelle fenêtre), n'hésitez pas à réduire la largeur de votre navigateur ni à utiliser les smartphones ou les simulateurs pour bien voir les avantages visuels des IFrames responsives.

Flexslider dans un IFrame simple (si on réduit la fenêtre, comme la hauteur est fixe en pixel, il se crée un espace sous le diaporama... peu esthétique...)


Flexslider dans un IFrame responsive


Vidéos embed de Youtube dans un IFrame simple (Si on réduit la fenêtre, comme la hauteur est fixe en pixel, il se crée des bandeaux noirs au dessous et au dessus de la vidéo... peu esthétique...)


Vidéos embed de Youtube dans un IFrame responsive

NB : Flexslider est un slideshow responsive design qui utilise jquery (Un zip pour essayer Flexslider ici. Utilisable uniquement en Iframe pour l'instant.)

Mise en place des  IFrames responsives

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

Il suffit dans un premier temps de placer ce code dans styleplus.css de votre ou de vos skins

.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 ici 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).
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 img de GuppY.
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 à 80%, mais on peut supprimer ce div (surligné en violet), l'IFrame occupera alors toute la largeur disponible. Seules les parties surlignées en vert sont obligatoires.
Ces codes sont à copier-coller dans le code source d'un article, d'une boite libre en adaptant le contenu de l'Iframe...

<div style="margin: auto; width:80%">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio800x600.gif" />
<iframe frameborder="0" height="150" marginheight="0" marginwidth="0" scrolling="no" src="photo/flexslider-iframe.html" width="200"></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:80%">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio800x600.gif" />
<iframe allowfullscreen="" frameborder="0" height="150" src="https://www.youtube.com/embed/m1vxVhvkHtM?rel=0" width="200"></iframe>
</div>
</div>

<div style="margin: auto; width:80%">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio640x360.gif" />
<iframe allowfullscreen="" frameborder="0" height="90" src="https://www.youtube.com/embed/Nak-j7f6dfE?rel=0" width="160"></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, contacter le webmestre de ce site.


Date de création : 12/02/2016 @ 17:33
Catégorie : Astuces - IFrames responsives
Page lue 58605 fois


Réactions à cet article


Personne n'a encore laissé de commentaire.
Soyez donc le premier !