Comment puis-je adapter le lecteur YouTube à la largeur de la page tout en conservant le format ?

Question

J'ai une vidéo YouTube que je veux mettre sur ma page web.

Je veux mettre à l'échelle la vidéo pour s'adapter à un pourcentage du navigateur des utilisateurs, mais aussi de garder le rapport d'aspect.

J'ai essayé ceci :

<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>

Mais cela ne fait que rendre le joueur plus large, pas plus élevé.

Dois-je utiliser JavaScript (ou CSS non standard) ?

Answer 1

Ce que je crois être la meilleure solution CSS.

.auto-resizable-iframe {
  max-width: 420px;
  margin: 0px auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

<div class="auto-resizable-iframe">
  <div>
    <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
  </div>
</div>

Démo http://jsfiddle.net/JBhp2/

Answer 2

Assez facile avec un peu de javascript.

jQuery(function() {
    function setAspectRatio() {
      jQuery('iframe').each(function() {
        jQuery(this).css('height', jQuery(this).width() * 9/16);
      });
    }

    setAspectRatio();   
    jQuery(window).resize(setAspectRatio);
});

Answer 3

Ce plugin jQuery a fait les rondes de ces derniers temps, il s'appelle FitVids et fait exactement ce dont vous avez besoin, redimensionne les vidéos en fonction de la taille du navigateur tout en maintenant le format.

http://swisshempshop.com