youtube

iFrame & Responsive Design

Posted on 24/01/2013 · Posted in Uncategorized

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.


YARPP