Si YouTube propose un code à copier / coller dans sa page web pour intégrer une vidéo, le format n'est pas toujours bien adapté aux plateformes mobiles. Alors que je viens de refondre mon blog de Divi vers Oxygen Builder, j'ai regardé comment le site réagissait lorsque je le consultais sur un smartphone.
C'est en consultant une page, sur laquelle j'avais intégré une vidéo YouTube, que je me suis rendu compte que celle-ci était complètement pétée...
Comme on peut le voir sur l'image ci-dessus, la partie gauche montre une vidéo Youtube qui n'est pas responsive. Du coup elle prend la largeur de l'écran mais l'entête et le contenu est devenu plus étriqué... A droite, on voit bien que l'iframe est responsive de manière à afficher le contenu de la page correctement.
C'est donc avec un peu de CSS que l'on va pouvoir remédier à ce petit problème.
Sur YouTube, lorsque l'on souhaite partager une vidéo puis lorsque l'on clique sur intégrer, voici le code qu'il nous propose :
<iframe width="560" height="315" src="https://www.youtube.com/embed/64l7ONwd730" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
En récupérant ce code dans notre page, on s'aperçoit que l'affichage n'est pas correct sur les smartphones. En effet, on voit déjà dans le code que la largeur est de 560 pixels (width="560"). Or, un smartphone affichera une résolution plus basse.
Pour remédier à cela, je vais reprendre le code donné par YouTube en le mettant dans une DIV.
<div class="video-embarquee"> <iframe width="560" height="315" src="https://www.youtube.com/embed/64l7ONwd730" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
J'ai ajouté une classe à ma DIV que j'ai nommé "video-embarquee", il ne me reste plus qu'à mettre le code CSS suivant dans ma feuille de style pour rendre la balise iframe responsive.
.video-embarquee {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.video-embarquee iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
Le ratio de 56,25% dans le padding-bottom correspond à un format 16/9. Tu pourras toujours adapter cette valeur en fonction du format de ta vidéo mais à l'heure actuelle, la plupart des vidéos sont au format 16/9.
Voilà donc une petite astuce qui rendra ton site plus agréable à regarder sur un smartphone s'il contient des vidéos YouTube.
