web-dev-qa-db-fra.com

Hauteur automatique lors de l'intégration d'une vidéo YouTube?

j'ai intégré une vidéo YouTube sur mon site Web, mais le problème est que j'ai besoin que la hauteur s'ajuste automatiquement en fonction de la largeur et du rapport hauteur/largeur de la vidéo. Donc, si ma largeur est de 1280, ma hauteur devrait être de 720 si la vidéo est en 16: 9. J'ai essayé d'utiliser des unités 'VW' et 'VH' mais celles-ci ne semblent pas fonctionner avec un iframe. Ma largeur est déjà réglée proportionnellement.

Mon code est ci-dessous:

<iframe style="margin-right: 1%; margin-left: 1%;" width="98%" height="" src="https://www.youtube.com/embed/HwzQbfde-kE" frameborder="0"></iframe>
htmlcssvideoyoutube
18
Dominic Newman

Vous pouvez le résoudre par ce code. Exemple de lien en direct

CSS: 

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Exemple Html 

<div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/_TyJeKKQh-s?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
15
MD Ashik

La question a été résolue par l'utilisateur de Reddit 'mr_bacon_pants' ici.

9
Dominic Newman

J'ai pu créer une taille iframe réactive en utilisant vw sur les deux largeur et hauteur de l'élément de style parce que je connais la quantité de largeur horizontale que je veux que les éléments utilisent, puis je calcule la hauteur en fonction de la largeur et du fait que la vidéo est au format 16: 9. Si vous souhaitez que la vidéo consomme 45% de l'espace horizontal au-dessus des tailles d'écran de 893 pixels et 90% sinon, alors:

.embedded-video-16-9 {
  width:  90vw;
  height: 50.625vw; /* 90*9/16 */
  margin-left: 5vw;
  margin-right: 5vw;
}

@media (min-width: 893px) {
  .embedded-video-16-9 {
    width: 45vw;
    height: 25.3125vw; /* 45*9/16 */
    margin-left: 2vw;
    margin-right: 2vw
  }
}

Utilisé comme:

<iframe 
  class="embedded-video-16-9" 
  src="https://www.youtube.com/embed/_TyJeKKQh-s?controls=0" 
  frameborder="0" 
  allowfullscreen=""
></iframe>
0
Ross Rogers