E-LOOU

BLOG

      Rendre une vidéo Youtube responsive

      par · Publié · Mis à jour

      Lors de l’intégration d’une vidéo youtube, vous avez dû intégrer une <iframe>
      Les iframe ont obligatoirement des largeur et hauteur définies.
      Sans ajout de code CSS, vous ne pourrez donc pas avoir de vidéo responsive.

      Voici le code de l’iframe que vous récuperez en cliquant sous la vidéo youtube, sur partager puis sur intégrer

      <iframe title="YouTube video player" src="https://www.youtube.com/embed/xxxxxxxx" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

      Afin de rendre responsive cette vidéo, il faut encapsuler l’iframe dans une DIV et lui assigner une class CSS, nommée ci-dessous .video-container

      <div class="video-container">
    <iframe title="YouTube video player" src="https://www.youtube.com/embed/xxxxxxxx" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

      Ajoutez les styles css

      pour rendre la vidéo youtube responsive, il vous suffit d’ajouter ces règles CSS à votre feuille de style en précisant le point de rupture pour les mobiles

      @media (max-width:478px;) {
    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    }
    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
}
      16:9 aspect ratio : 9 / 16 * 100% = 56.25%;
4:3 aspect ratio : 3 / 4 * 100% = 75%;
1:1 aspect ratio : 1 / 1 * 100% = 100%.

      Vous noterez l’utilisation de la règle « padding-bottom:56.25% », combiné à une hauteur à 0.
      Imaginons un carré de 200x200px a qui ont enlève sa hauteur. Alors la hauteur de l’élément carré sera gérée par le padding-bottom.
      Afin de transformer notre carré en rectangle ayant un aspect 16/9ème, nous aurons besoin d’un padding à 56.25%

      Étiquettes :