de.hideout-lastation.com
Embed Responsive Videos einfach mit SuperEmbed.js
Das moderne Web ist reaktionsschnell und mehr Designer erkennen dies jeden Tag. Aber es gibt eine lästige Herausforderung, wenn es um Responsive Design geht: eingebettete Inhalte .
Jede Video-Site von YouTube bis Vimeo hat einen Standard-Embed-Code, der auf eine bestimmte Größe festgelegt ist. Dies bedeutet, dass Entwickler andere Lösungen verwenden müssen, um vollständig reagierende Videos zu erstellen .
Anstelle einer CSS-Containerklasse können Sie jedoch SuperEmbed.js verwenden, eine kostenlose JavaScript-Bibliothek zum Erstellen von Responsive-Videos .
Dieses Plugin löst zwei Probleme auf einmal. Alle eingebetteten Videos werden gestreckt, um den Hauptcontainer zu füllen, und gleichzeitig flexibel genug, um die Größe basierend auf dem Browserfenster anzupassen .Der beste Teil ist, dass SuperEmbed.js keinen zusätzlichen Code benötigt, also können Sie die Dateien einfach einbetten und sie laufen lassen . Diese JS-Bibliothek kümmert sich um den Rest, indem sie auf eingebettete Elemente bestimmter Websites abzielt .
Alle Videos behalten ihr spezifisches Seitenverhältnis bei, sodass Sie sich keine Gedanken über verwackelte Dimensionen machen müssen. Und SuperEmbed funktioniert als eine Vanilla-JS-Bibliothek ohne Abhängigkeiten wie jQuery.
Derzeit unterstützt SuperEmbed mehr als 15 Videoeinbettungen von Websites wie YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me und Archive.org (neben vielen anderen). Diese Liste wächst weiter, also erwarten Sie, dass im Laufe der Zeit weitere Video-Streaming-Dienste hinzugefügt werden.
Damit dieses Tool funktioniert, müssen Sie nur die Bibliothek herunterladen und sie wie folgt in den Header Ihrer Website einfügen :
Sie können eine vollständige Kopie aus dem GitHub Repo herunterladen, die auch Spezifikationen für unterstützte Video-Sites und aktuelle Browser-Unterstützung enthält .
In den meisten Fällen unterstützt SuperEmbed alle modernen Browser von FireFox 3.5+, Chrome 4+ und Versionen von Internet Explorer 9 oder höher.
Dies ist eine sehr beeindruckende Bibliothek, die alle Browser-Unterstützung berücksichtigt und wie gut sie direkt aus der Box funktioniert . Es ist eine viel einfachere Lösung als die CSS-Hacks, wenn Sie sich auf JavaScript verlassen können.
Sie können mehr Informationen über GitHub finden und Sie können es live in dieser Geige laufen sehen .
Erstellen Sie Virtual Reality im Web mit JavaScript und WebVR
Die Oculus Rift, HTC Vive und andere VR-Produkte haben die Zukunft der Technologie verändert. Wir können über die Idee von VR-Headsets spotten, aber ähnlich wie das Internet in den 1990ern ist VR der Weg in die Zukunft.Und dank WebVR haben wir bereits eine Möglichkeit, das Internet mithilfe einer leistungsfähigen JavaScript-API mit VR zu verbinden . Dies
Bulma ist das einzige Flexbox-gestützte CSS-Framework, das Sie jemals brauchen werden
Flexbox ist ein heißes Thema für Frontend-Entwickler, da es einen modernen Ansatz für CSS-Alignments bietet. Die meisten Website-Layouts basieren auf CSS-Gleitkommazahlen oder festen Prozentsätzen, um Inhaltsblöcke in einer Linie zu halten.Aber flexbox ändert alle Regeln und mit einem Framework wie Bulma können Sie komplette Layouts auf flexbox erstellen . Dies
