Comment faire pour qu'une vidéo Youtube s'adapte à tous les écrans
1. créer une div container pour conserver le format 16:9 (9/16=0.565), puis adapter le contenu de la balise iframe à cette div (100%).
Dans le CSS, un fichier de surcharge (override) comme par exemple custom.css, insérer ce code:
.video-container {
height: 0;
padding-bottom: 56.25%;
padding-top:25px;
position: relative;
}
.video-container iframe {
height: 100%;
left: 0;
top: 0;
width:100%;
position: absolute;
}
2. Encadrer l'iframe avec la div comme ceci :
<div class="video-container">
<!-- Coller le code YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/QpYt4W5I_EA=1" frameborder="0" allowfullscreen></iframe>
</div>
that's all folks!
Il y a bien d'autres méthodes que vous pouvez-commenter ci-dessous ...