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%;
}