Sofortige Flüssigkeitsvideos mit Ansichtsfenstereinheiten

Intrinsische Kennzahlen sind ein Ansatz zum Erweitern und Zusammenziehen von Elementen auf einer Webseite, wodurch sie fließend sind und gleichzeitig ihre Proportionen einschränken. Thierry Koblentz schlug die Idee bereits 2009 vor.

Sie werden häufig in Verbindung mit Video verwendet, da weder die Breite noch die Höhe eines Iframes (das normalerweise beim Einbetten von Videoinhalten verwendete Element) für flüssige Websites nicht automatisch skaliert wird.

Um es kurz zu machen: Videos reagieren standardmäßig nicht.

Zu diesem Thema wurden bereits umfangreiche Zuschreibungen vorgenommen. Der berühmteste davon ist Thierry Koblentz 'A List Apart' Artikel, der vorschlägt, eine Menge Sachen mit zu machen Position: relativ und einige Hacks für den alten Internet Explorer. Wenn Sie mit der Implementierung fertig sind, haben Sie Dutzende von Codezeilen zu Ihrem Markup und CSS hinzugefügt, um ein Video ansprechend zu machen. Argh!

Breite des Ansichtsfensters

Zum Glück haben wir jetzt Zugriff auf die vw Sizing-Einheit. Solange Sie keine alten Android-Geräte oder IE8 unterstützen müssen, ist die Verwendung relativ sicher.

Alles, was wir tun müssen, ist, die Breite unseres Iframes auf 100% und dann die Höhe auf die folgende Formel einzustellen: (100 * Verhältnis) vw.

Bei den meisten YouTube-Videos beträgt Ihr Verhältnis 16: 9 (ansonsten als 9/16 ausgedrückt). Wenn Sie also ein YouTube-Video ansprechen möchten, verwenden Sie den folgenden CSS-Code:

iframe Breite: 100%; Höhe: 56,25VW; / * 100 * (9/16) * /

Dies wird noch einfacher, wenn Sie einen Präprozessor wie Sass, LESS oder Stylus verwenden, da Sie die gewünschten Verhältnisse im Handumdrehen durchlaufen können. Für ein 4: 3-Video könnten Sie beispielsweise Folgendes schreiben:

iframe width: 100% height: (100 * (3/4)) vw

Ränder und Rahmen hinzufügen

Was passiert, wenn wir einen Rand oder Rand hinzufügen möchten? Es scheint alles aus dem Gleichgewicht zu bringen. Um dies zu beheben, müssen wir lediglich den Rand und die Ränder zu einem Umhüllungselement hinzufügen und dann den Rand von unserer Höhe mit subtrahieren calc. Wir fügen hinzu Bildschirmsperre zu unserer iframe um zu verhindern, dass am unteren Rand des Videos eine Lücke entsteht.

.vid margin: 2rem border: 30px durchgehender roter iframe width: 100% height: calc ((100vw - 60px) * (9/16)) display: block

Das nächste "gotcha" ist, was ist, wenn unser Video in einem Container ruhen soll, der nur 70% des Ansichtsfensters umfasst? Einfach, wir ändern einfach die 100 vw in unserer calc-Funktion an 70 vw.

Fazit

Das ist alles dazu! Super einfache responsive Videos. Weitere Informationen zu Kennzahlen und vw-Einheiten finden Sie in Jason Talberts brillantem CodePen.