Wie CSS es iframe ermöglicht, adaptive Höheneffekte zu erzielen

Immer mehr Menschen nutzen Mobiltelefone zum Surfen im Internet, daher wird die Reaktionsfähigkeit der Website immer wichtiger. Beim Testen der Website auf Mobilgeräten musste ich lange herausfinden, warum meine Videos nicht wie erwartet funktionierten, bis ich einen tollen CSS-Trick entdeckte, der dem Iframe eine adaptive Höhe ermöglichte. Als nächstes werde ich Ihnen die Methode zur dynamischen Realisierung einer benutzerdefinierten Höhe von Iframe vorstellen. Interessierte Freunde können sich darauf beziehen.

Adaptive Höhe des Iframes

Zu Demonstrationszwecken wird in diesem Artikel ein Video zum Einbetten unseres Iframes verwendet. Besuchen Sie zunächst die Video-URL, klicken Sie unter dem Video auf „Teilen“ und dann auf „Einbetten“. Der spezifische Code lautet wie folgt:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>

Als nächstes müssen wir width = „560“ height = „löschen. 315", da hier die Größe des Iframes eingestellt werden soll. Da wir die Abmessungen selbst festlegen müssen, ist dies nicht erforderlich.

Nach der Verwendung von CSS

müssen wir den Iframe in ein

eines anderen HTML-Elements einfügen. Dies ist sehr wichtig, da dieses Element die Größe Ihres Iframes ändert . Fügen Sie dann CSS-Klassen zum umschlossenen Element und eine Klasse zum Iframe hinzu, wie unten gezeigt.

<div class="resp-container">
    <iframe class="resp-iframe" src="https://www.youtube.com/embed/dQw4w9WgXcQ" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
</div>

Definieren Sie die Wrapper-Klasse mit dem folgenden Stil:

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

Position: relativ und die Position des Iframes ist hier sehr wichtig. position: relative, damit wir später den Iframe mit dem Wrapping-Element verknüpfen können. Dies liegt daran, dass position: absolute in CSS ein Element basierend auf dem nächstgelegenen nicht-statischen übergeordneten Element positioniert.

overflow: versteckt Ob alle Elemente ausgeblendet werden sollen, die möglicherweise außerhalb des Containers platziert werden.

Polsterung oben: 56,25 % Das ist der Schlüssel. In CSS kann die Eigenschaft „padding-top“ auf einen Prozentsatz eingestellt werden, wodurch unser Iframe in den richtigen Proportionen bleibt. Durch die Verwendung von Prozentsätzen wird die zu verwendende Polsterung basierend auf der Breite des Elements berechnet. In unserem Beispiel wollen wir ein Verhältnis von 56,26 % beibehalten, es können aber auch andere Verhältnisse verwendet werden.

Definieren Sie die Iframe-Klasse wie folgt:

.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

position: absolute; Dies gibt dem Iframe eine Position relativ zum Wrapper und platziert ihn auf der Polsterung des Wrappers.

oben: 0 und links: 0 werden verwendet, um den Iframe in der Mitte des Containers zu positionieren.

Breite: 100 % und Höhe: 100 % sorgen dafür, dass der IFRAME den gesamten umschlossenen Platz einnimmt.

Nach Abschluss sollten Sie einen responsiven Iframe erhalten.

Zusammenfassung: In diesem Artikel haben wir die Techniken gesehen, die es Iframes ermöglichen, eine adaptive Höhe zu erreichen. Wie Sie sehen, ist es eigentlich ziemlich einfach und dieser Artikel erspart Ihnen hoffentlich stundenlanges Ausprobieren.

[Verwandte Tutorial-Empfehlungen]

1. CSS-Tutorial

2. Was ist