Wie erstelle ich: Reaktive Iframe

Lernen Sie, wie Sie mit CSS reaktive Iframes erstellen.

Reaktiver Iframe

Erstellen Sie einen Iframe, der das Breitverhältnis (4:3, 16:9 usw.) beibehält, wenn er skaliert wird:

Was ist das Breitverhältnis?

Das Breitverhältnis des Elements beschreibt das Verhältnis zwischen Breite und Höhe. Zwei häufige Video-Breitverhältnisse sind 4:3 (der allgemeine Videoformat des 20. Jahrhunderts) und 16:9 (HD-Fernsehen und europäische digitale Fernsehformate sowie das Standardbreitverhältnis von YouTube-Videos).

How To - Reaktive Iframes

Schritt 1 - Fügen Sie HTML hinzu:

Verwenden Sie das Container-Element, z.B. <div>, und fügen Sie darin einen Iframe hinzu:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

Schritt 2 - Fügen Sie CSS hinzu:

zu padding-top Fügen Sie Prozentsatzwerte hinzu, um das Breitverhältnis des Containers DIV beizubehalten. Das folgende Beispiel erstellt einen Container mit dem Breitverhältnis 16:9, was das Standardbreitverhältnis von YouTube-Videos ist.

Beispiel - Breitverhältnis 16:9

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* Breitverhältnis 16:9 (9 geteilt durch 16 ergibt 0.5625) */
}
/* Dann stellen Sie das Stile des Iframes ein, um ihn vollständig an die Höhe und Breite des Containers div anzupassen */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

Try it yourself

Andere Breitverhältnisse

Beispiel - Breitverhältnis 4:3

.container {
  padding-top: 75%; /* Breitverhältnis 4:3 */
}

Try it yourself

Beispiel - Breitverhältnis 3:2

.container {
  padding-top: 66.66%; /* Breitverhältnis 3:2 */
}

Try it yourself

Beispiel - Breitverhältnis 8:5

.container {
  padding-top: 62.5%; /* Breitverhältnis 8:5 */
}

Try it yourself

Beispiel - 1:1 Breitverhältnis (Breite und Höhe sind immer gleich)

.container {
  padding-top: 100%; /* 1:1 aspect ratio */
}

Try it yourself