Easy-Micro

TECHNIQUE Responsive Web Design
Vidéo responsive
Techniques pour avoir une vidéo Youtube responsive

Vidéos 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 :
.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%;
}
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ù :-)

Vidéos responsive 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%;
}

Responsive web design Pour aller plus loin...


< Page précédente RESPONSIVE WEB DESIGN