Mit dieser kostenlosen App können Sie Responsive Embed-Codes einfach erstellen
Jeder Webdesigner weiß es wie man videos einbettet. Das Einbetten ist der einfachste Weg, Inhalte zu teilen und Ihre Artikel mit relevanten Medien zu verbessern.
Es gibt jedoch ein Problem mit iframes und anderen ähnlichen Video-Einbettungen: Mangel an responsiven Lösungen. Jeder moderne Standort ist voll ansprechend und ein festes Video kann diesen Fluss auf dem Handy wirklich unterbrechen.
Um diesem Problem zu begegnen, versuchen Sie es Embedresponsively.com. Diese kostenlose Web-App generiert automatisch eingebettete Codes für eine Vielzahl von Medien-Sites und sogar unterstützt standardmäßige iframe-Elemente.
Standardmäßig können Sie Wählen Sie aus einer Handvoll Multimedia-Sites die native eingebettet unterstützen:
- Youtube
- Vimeo
- DailyMotion
- Google Maps
- Soundcloud
- Scribd
Sie müssen sich nicht alle diese eingebetteten Codes merken oder sich mit ihren eingebetteten Widgets herumschlagen. Gerade Kopieren Sie die URL des Elements, das Sie einbetten möchten und fügen Sie es in die Web-App ein.
Sobald Sie auf die Schaltfläche klicken “Einbetten” Knopf, du wirst eine Vorschau erhalten dass du kannst Testen Sie in Ihrem Browser durch Ändern der Größe, um zu sehen, wie sich das Video anpasst. Unter dem Vorschaubereich finden Sie einen Codeblock, den Sie können Kopieren / Einfügen und zum Einbetten in Ihre Site verwenden.
Dies ist eine der einfachsten Lösungen für das ansprechende Einbettungsproblem. Das Ziel ist es Halten Sie das Video flexibel, während Sie das Seitenverhältnis beibehalten-keine leichte Aufgabe.
Es gibt einen großartigen Beitrag zu CSS-Tricks mit einer anderen Lösung, die mehr auf Klassen und einem Containerelement basiert. Aber wenn du Ich möchte nicht immer daran denken, diesen Container hinzugefügt zu haben Möglicherweise möchten Sie Embedresponsively.com bevorzugen.
Werfen Sie einen Blick auf die Website und probieren Sie es aus. Wenn es dir nichts ausmacht mit längeren Codeausschnitten arbeiten Dies ist sicherlich eine großartige Lösung für jedes responsive Layout.
Wenn Sie möchten, können Sie den vollständigen Quellcode kostenlos auf GitHub herunterladen Unterstützung für einbettbare Medien hinzufügen.
