Integrieren Sie Responsive Videos einfach mit SuperEmbed.js

Das moderne Web ist voll ansprechend und mehr Designer erkennen dies jeden Tag. Es gibt jedoch eine lästige Herausforderung, wenn es um responsives Design geht: eingebetteter Inhalt.

Jede Videoseite von YouTube bis Vimeo hat eine Standard-Einbettungscode auf eine bestimmte Größe fixiert. Dies bedeutet, dass Entwickler andere Lösungen verwenden müssen Erstellen Sie vollständig responsive Videos.

Anstelle einer CSS-Containerklasse können Sie jedoch verwenden SuperEmbed.js, eine kostenlose JavaScript-Bibliothek für Erstellen von responsiven Videos.

Dieses Plugin löst zwei probleme auf einmal. Alle eingebetteten Videos werden angezeigt strecken, um den Hauptbehälter zu füllen, dabei auch flexibel genug zu sein Größe ändern basierend auf dem Browserfenster.

Das Beste ist, dass SuperEmbed.js erfordert keinen zusätzlichen Code, also kannst du einfach die Dateien einbetten und Lass sie laufen. Diese JS-Bibliothek kümmert sich um den Rest Targeting eingebetteter Elemente von bestimmten Websites.

Alle Videos ihre spezifischen Seitenverhältnisse beibehalten, Sie müssen sich also keine Gedanken über ungewöhnliche Dimensionen machen. Und SuperEmbed arbeitet als Vanilla JS-Bibliothek mit keine Abhängigkeiten wie jQuery.

Genau jetzt, SuperEmbed unterstützt 15+ Video-Einbettungen von Websites wie YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me und Archive.org (ua). Diese Liste ist immernoch wachsend, Erwarten Sie also, dass im Laufe der Zeit weitere Video-Streaming-Dienste hinzugefügt werden.

Um dieses Tool zum Laufen zu bringen, müssen Sie nur das tun Laden Sie die Bibliothek herunter und Fügen Sie es dem Header Ihrer Site hinzu wie so:

Sie können eine herunterladen vollständig kopieren aus dem GitHub-Repo, das auch Spezifikationen für enthält Unterstützte Videoseiten und aktuelle Browserunterstützung.

Zum größten Teil SuperEmbed unterstützt alle modernen Browser von FireFox 3.5+, Chrome 4+ und Versionen von Internet Explorer 9 oder höher.

Dies ist eine sehr beeindruckende Bibliothek, wenn man die gesamte Browserunterstützung bedenkt und wie gut sie ist funktioniert gleich nach dem Auspacken. Es ist eine viel einfachere Lösung als die CSS-Hacks, wenn Sie sich auf JavaScript verlassen können.

Sie können finden Mehr Informationen auf GitHub und du kannst es sehen Laufen laufen in dieser Geige.