Automatische Höhe beim Einbetten eines YouTube-Videos?

Ich habe ein YouTube-Video auf meiner Website eingebettet, aber das Problem ist, dass ich die Höhe automatisch basierend auf der Breite und dem Seitenverhältnis des Videos anpassen muss. Wenn meine Breite also 1280 beträgt, sollte meine Höhe 720 betragen, wenn das Video 16:9 ist. Ich habe versucht, ‘VW’- und ‘VH’-Einheiten zu verwenden, aber diese scheinen nicht mit einem Iframe zu funktionieren. Meine Breite ist bereits proportional eingestellt.

Mein Code ist unten:

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

Dieser Artikel enthält eine gute Antwort, die unten kopiert wurde.

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%;
}

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

Wie das funktioniert: Das Containerelement erhält eine Nullhöhe und eine prozentuale untere Polsterung. Die prozentuale untere Polsterung ist ein Prozentsatz der Containerbreite, wodurch ein festes Seitenverhältnis entsteht. Aber damit der Iframe innerhalb des Containers mit der Höhe Null angezeigt wird, müssen Sie den Container relativ und den Iframe absolut machen, positioniert innerhalb des div.

Ein … sehen Live-Beispiel.

BEARBEITEN:
Wenn Sie eine andere prozentuale Breite als 100 % verwenden müssen, multiplizieren Sie das Verhältnis mit dem Multiplikationsfaktor für die Breite. Siehe das Beispiel unten:

.video-container {
  position: relative;
  padding-bottom: calc(56.25% * 0.75); /* 16:9 */
  width: 75%;
  height: 0;
}

Wenn Sie sich für das gesamte Ansichtsfenster entscheiden, können Sie den folgenden Code verwenden:

iframe{
  width: 100vw;
  height: calc(100vw/1.77);
}

Ich konnte eine responsive Iframe-Größe mit erstellen vw an beide Breite und Höhe des Stilelements, weil ich die horizontale Breite kenne, die die Elemente verwenden sollen, und dann berechne ich die Höhe basierend auf der Breite und dem Wissen, dass das Video 16:9 ist. Wenn Sie möchten, dass das Video 45 % des horizontalen Platzes über Bildschirmgrößen von 893 Pixel und ansonsten 90 % einnimmt, dann:

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

Verwendet wie:

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

Die Html width Attribut akzeptiert nur Zahlen (“gültige nicht negative ganze Zahlen”), keine Zeichenfolgen mit angehängten Maßeinheiten (%, px, vw usw.) wie in der ursprünglichen Frage.

Wenn Sie die Breite kennen iframe‘s Container (in einer absoluten Einheit wie z px oder vwnicht %) dann können Sie verwenden css calc() für eine Zeile height Lösung im CSS:

.youtube-embed {
  --container-width: 720px;
  --ratio: calc(16 / 9); /* 1.77 */
  width: 100%;
  height: calc(var(--container-width) / var(--ratio));
}

Hier ist eine reaktionsschnelle Lösung, die das horizontale Auffüllen des Containers berücksichtigt:

:root {
  --video-ratio: calc(16 / 9);
  --video-container-max-width: 640px;
  --video-container-x-padding-sum: 2rem; /* eg, padding: 0 1rem */
}

.youtube-embed {
  --video-container-width: calc(100vw - var(--video-container-x-padding-sum));
  width: 100%;
  height: calc(var(--video-container-width) / var(--video-ratio));
}

@media only screen and (min-width: 672px) {
  .youtube-embed {
    --video-container-width: var(--video-container-max-width);
  }
}