Forum - En vrac ! - Iframes responsives

Bonsoir Jean-Denis,

En suivant ton excellent tuto, j'ai réussi à créer une iframe responsive.

J'aurais cependant une petite question : l'frame, que j'ai créée, fait 400 x 300.

Est-ce possible qu'elle s'affiche, sur PC ou tablette, avec ses dimensions propres ?

Car en suivant ton tuto, on peut :

- soit lui faire tenir la largeur totale de la page ;

- soit un % de la largeur totale : ma page faisant 740px de large, il est vrai que je pourrais fixer le % à 54 % (ce qui correspond à 400px) mais sur smartphone, à ce moment-là, il n'occupera aussi que 54% de la largeur ?

Ai-je loupé quelque chose dans tes explications ?

Cordialement.

Bonjour Han,

Merci pour le commentaire sur cet "excellent tuto"

Citation : « Han »

Est-ce possible qu'elle s'affiche, sur PC ou tablette, avec ses dimensions propres ?

Si je comprends bien, tu souhaiterais qu'il s'affiche avec 400x300 ?

Dans ce cas, autant placer un Iframe "standard" qui aura cette dimension.

Un Iframe responsive est sensé s'adapter à la fenêtre dans laquelle il s'affiche.

La partie :  

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

sert simplement si tu souhaites peaufiner l'affichage en n'occupant pas toute la largeur de la page (ce div n'est pas obligatoire - reporte-toi au tutoriel -).

D'ailleurs, je viens de voir que tu as mis 95% (en ligne).

... Et les valeurs height="300" et width="400" servent à fixer les dimensions minimales de l'Iframe responsive ( là encore, reporte-toi au tutoriel ).

Elles peuvent être donc plus faibles si tu souhaites que l'Iframe s'affiche correctement dans une résolution de 320px en mode portrait ( résolution que je n'avais pas testée dans nos MP ).

Cordialement,

Bonsoir Jean-Denis,

Donc, avec cette méthode, l'image occupera le même "espace" que tu sois sur PC, tablette ou smartphone :

- si tu déclares un pourcentage,  ex 54 %, l'image occupera 54 % de la largeur de l'écran sur PC, tablette ou smartphone (enfin, c'est ce que donne mon essai).

- si tu ne déclares pas de pourcentage, elle occupera toute la largeur de l'écran sur PC, tablette ou smartphone.

C'est bien ça ?

En fait, je pensais que ça fonctionnait comment pour les photos avec cette astuce :

Lorsque tu insères une image dans un document avec CKEditor, dans les propriétés de l'image tu as un onglet Avancé, dans lequel il y a un champ Style et un autre Classe CSS.

Cas Style : width: 100%; max-width: NNNpx; (NNN étant la largeur à afficher en WEB)

Le width à 100% va permettre d'afficher l'image sur toute la largeur du smartphone, ou de la tablette, le max-width ayant la largeur réelle à afficher limitera un affichage démesuré.

Cette technique est-elle possible avec une Iframe ?

Cordialement

Bonjour Han,

Citation : « Han »

- si tu déclares un pourcentage,  ex 54 %, l'image occupera 54 % de la largeur de l'écran sur PC, tablette ou smartphone (enfin, c'est ce que donne mon essai).

- si tu ne déclares pas de pourcentage, elle occupera toute la largeur de l'écran sur PC, tablette ou smartphone.

C'est bien ça ?

Tout à fait...

C'est un peu la même chose que pour les photos, sauf qu'il faut que tu affiches un % en largeur  de 100 ( ou autre % ) et que tu laisses vide la hauteur.

Dans les Iframes standards de GuppY, il faut fixer une largeur en %, mais une hauteur en px ce qui peut s'avérer inesthétique...

D'où les Iframes responsives !

Tu peux malgré tout "améliorer" ton affichage en plaçant le code de l'Iframe dans un div en lui donnant des valeurs maximales et minimales :  

<div style="margin: auto; width:95%; max-width:800px; min-width:280px;">
</div>

pour éviter un affichage "démesuré" sur ordinateur et trop petit sur smartphone...

évidemment, si tu ne mets pas width:95% ou si tu mets width:100% cela revient au même et ton Iframe responsive occupera toute la largeur disponible dans les limites du max-width...

Cordialement,

Bonjour Jean-Denis.

C'est parfait.

Merci.