Responsive Web DesignVidéo responsive
Techniques pour avoir une vidéo Youtube responsive
Petits écrans
Voici un exemple de iframe récupéré sur Youtube (menu Partager > Intégrer):<iframe width="560" height="315" src = "https://www.youtube.com/embed/27ZlMf0I1M0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>L'idée est de mettre votre iframe dans une balise div qui va faire un ratio de l'écran et obliger le iframe à prendre 100% de ce ratio :
<div class = "video-container">
<iframe width="560" height="315" src = "https://www.youtube.com/embed/27ZlMf0I1M0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Voici le code CSS :
Note : Le padding-bottom permet de jouer sur la largeur de l'élément en contraignant la hauteur. Un padding-top aurais aussi fait l'affaire. Notez enfin que le code CSS est ici appliqué aux balises iframe, object et embed (au cas où :-)
.video-container {
position: relative; /* nécessaire pour pouvoir définir une position absolute sur le iframe */
padding-bottom: 56.25%; /* ratio 16/9 soit hauteur 9 ÷ largeur 16 */
height: 0; overflow: hidden;
clear: both;
}
/* Pour tout iframe, object et embed contenu dans la class video-contener */
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} Grand écran
On rajoute une deuxième balise div pour que la vidéo ne passe pas en 100% de l'écran sur les grands écrans :
<div class = "video-container"><div>
<iframe width="560" height="315" src = "https://www.youtube.com/embed/27ZlMf0I1M0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div>Voici le code CSS :
.video-container {
max-width: 560px;
margin: auto; /* pour centrer la vidéo : facultatif */
}
.video-container div {
position: relative; /* nécessaire pour pouvoir définir une position absolute sur le iframe */
padding-bottom: 56.25%; /* ratio 16/9 soit hauteur 9 ÷ largeur 16 */
height: 0; overflow: hidden;
clear: both;
}
/* Pour tout iframe, object et embed contenu dans la class video-contener */
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} Pour aller plus loin...
- Grafikart.fr
- Test responsive chez Mattkersley.com (à tester avec le site de l'Elysée ou avec celui de Fredjay)
