Des vidéos iframe et des google maps responsives

Des vidéos iframe et des google maps responsives

Pour un site de vidéos et de photos, j’ai du  trouver une solution pour rendre mes iframe responsive, afin qu’elle prennent toute la largeur et hauteur de l’écran. Cela vaut aussi bien pour les cartes (myMaps de google par exemple)  que pour les vidéos Youtube ..

Le problème des iframes est qu’elles ont par défaut une width et height fixes, on peut toujours indiquer une width de 100%, mais la hauteur elle ne prend pas en compte les %. En définissant juste une widht de 100%, on se retrouve avec une carte ou une vidéo sur toute la largeur mais une hauteur par défaut de 150 px, ce qui n’est pas très beau.

Pour contourner ce problème, l’idée de base est déjà d’entourer notre iframe d’une div que l’on va styliser en css:

<div class="full" class="content-area">
<iframe src="https://mapsengine.google.com/map/embed?mid=z-G5ZKskiCa0.kurgYjuor5gw"  ></iframe>
</div>
 

Voici l’astuce css pour imposer à notre iframe un comportement responsive par défaut :

La div parente , ici « .full« , est en position relative, et l’iframe a une position absolute pour s’adapter et occuper tout  l’espace de sa div  parente.

.full{
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0
}
.full iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

J’ai trouvé ces codes sur le net, il y a tellement de version que je n’en connais pas l’auteur exact. Le code marche, mais pour régler la hauteur de l’iframe, lorsqu’on diminue la taille de l ‘écran,   il faut jouer sur le padding-bottom et éventuellement préciser une media queries pour mobile et tablette.