CSS

Structure CSS adaptative

Proportion de vidéo adaptative

Petit truc rapide aujourd’hui, la préservation du rapport d’aspect (le ratio) 16: 9 avec l’unité vmin du CSS3. Avec iFrame pour les vidéos externes (YouTube, Vimeo...) et compagnie ou directement dans un DIV pour une vidéo HTML5.

<style>
  div {
    display: inline-block;
    width: 80vmin;
    height: 45vmin;
  }
</style>

<div style="background-color:#eee;border:1px solid:#ccc;">
  Test de proportion 16: 9
</div>

Avec un iFrame

<style>
  iframe {
    display: inline-block;
    width: 80vmin;
    height: 45vmin;
  }
</style>

<iframe src="https://player.vimeo.com/..." width="500" height="281" frameborder="0" allowFullScreen></iframe>

Compatibilité : Firefox 19+, Chrome 20+ (mobile 25+), IE10+, Safari 6 (mobile included), Opera 15.0
Pour plus d’information

Façon conventionnelle

J’utilise personnellement cette technique depuis des années. C’est d’ailleurs le même truc utilisé par Google sur YouTube. Un simple « padding » de 56.25% fait l’affaire.

padding-bottom: 56.25% = 16:9

Exemples

<style>
  .video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
  }
</style>

<div class="video" style="background-color:#eee;border:1px solid:#ccc;">
  Test de proportion 16: 9
</div>

<style>
  .video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video iframe,
  .video object,
  .video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="video">
  <iframe src="https://www.youtube.com/embed/pYWpLtoJhR8?ecver=2" frameborder="0" gesture="media" allowfullscreen></iframe>
</div>

Bootstrap 4

La librairie Bootstrap offre aussi des classes spécialement faites pour les proportions.

<!-- 21:9 ratio d'aspect -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 ratio d'aspect -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 ratio d'aspect -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 ratio d'aspect -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 ratio d'aspect -->
<div class="ratio ratio-16x9">
  <iframe src="..."></iframe>
</div>