Lorsque vous réalisez un site en Responsive Design. Si vous embarquez des services tiers via iFrame, il se peut que vous soyez embêté lors du redimensionnement de votre navigateur.
L’objectif, c’est que les iFrames se comportent de la même manière que les images en Responsive Design. La taille doit s’adapter automatiquement.
Actuellement, on arrive à ce resultat avec les images en utilisant le CSS suivant :
1 2 3 4 | img { width: 100%; height: auto; } |
Solution
Pour obtenir ce comportement avec les iFrames, nous allons utiliser une image transparente ayant un ratio correspondant à celui de l’iFrames.
Avec les services vidéos, nous utiliserons donc une image d’un ratio 16/9.
1 2 3 4 | <div class="iframe-responsive-wrapper"> <img class="iframe-ratio" src="data:image/gif;base64,R0lGODlhEAAJAIAAAP///wAAACH5BAEAAAAALAAAAAAQAAkAAAIKhI+py+0Po5yUFQA7"/> <iframe src="http://player.vimeo.com/video/49823151?color=ffffff" width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> |
Voici le CSS à utiliser.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .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%; } |
Cette solution a été récupéré sur Stack Overflow.
Vous noterez que l’image est un base64url, il s’agit d’un GIF Transparent sans meta-donnée de 16×9.
Merci pour l’astuce
Merci, cela m’a fait économiser plusieurs heures de recherche inutile
Très bon site