Vote utilisateur: 4 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles inactives
 

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 ...