Machen Sie alle eingebetteten Inhalte mit Reframe.js responsiv

Der schwierigste Teil über Videos einbetten erhält die Breite und Höhe korrekt. Diese Nummern Definiere das Seitenverhältnis und wenn sie aus sind, wirst du Holen Sie sich einen wilden Videoplayer.

Das ist trifft für alle eingebetteten Elemente zu wie iframes und Social-Media-Widgets. Und diese Dinge können mit Responsive Design noch komplizierter sein, da sie normalerweise so sind nicht ansprechende Elemente.

Aber mit Reframe.js, du kannst das schaffen jedes Element, das auf ein beliebiges Seitenverhältnis anspricht.

Dies ist vielleicht eines der einfachsten und dennoch wertvollsten JS-Plugins im Web. Es war eigentlich erstellt von Dollar Shave Club was überraschenderweise eine eigene GitHub-Seite hat.

Reframe ist eines ihrer kostenlosen Plugins Entwickelt für Entwickler, die einen einfacheren Weg suchen Umgang mit responsive eingebetteten Inhalten.

Der offensichtliche Schuldige ist eingebettetes Video von Websites wie YouTube und Vimeo. Es ist notorisch schwierig, diese Elemente ansprechend zu machen ohne CSS-Hacks.

Mit Reframe.js können Sie einfach wählen welches Element Sie anvisieren möchten und Umbenennen Sie es Verwendung der Auffrischen () Funktion.

Beginnen Sie mit dem Hinzufügen des Reframe.js-Plugins zu Ihrer Webseite. Sie können eine Kopie herunterladen von GitHub, und es ist nur 1 KB minimiert.

Dann bist du einfach Übergeben Sie die Funktion einen Selektor für alle Elemente, die Sie neu gestalten möchten. Lade die Seite und boom! Du solltest fertig sein.

Angenommen, Sie haben ein paar Videos in Ihre Website eingebettet. Sie können füge die Klasse hinzu .Video zum einbetten, und verwende das als Selektor. Aktualisieren fügt automatisch ein div und eine Klasse hinzu um den responsiven Stil zu erstellen.

Also dein JavaScript-Code würde so aussehen:

umbenennen ('. video');

Ziemlich einfach richtig?

Dieser Code zielt auf alle Elemente mit der Klasse ab .Video und macht sie ansprechbar. Keine zusätzlichen Hacks, keine zusätzlichen CSS. Zugegeben, es ist nichts falsch mit der Verwendung der CSS-Methode, aber Sie müssen es tun manuell wickeln alle eingebetteten Videos mit der Zusatzklasse.

Aktualisieren Sie einfach erspart Ihnen diesen zusätzlichen Schritt und bringt alles mit JavaScript durch. Zu Schauen Sie sich eine Demo an und finden Sie einige grundlegende Code-Schnipsel, Besuchen Sie die Homepage von Reframe.js. Sie können Laden Sie eine Kopie des Codes herunter direkt aus dem GitHub Repo.