Wie binden Sie YouTube, Vimeo, Instagram und Google Maps Responsive ein

Eines der größten Schlagworte in der Online-Designwelt der letzten zwei oder drei Jahre muss "Responsive" sein. Mit dem Aufkommen von einem 4-Zoll-Smartphone-Bildschirm bis hin zu einem 27-Zoll-Display kann es schwierig sein, sicherzustellen, dass Ihre Website oder Ihr Blog auf jeden Fall gut aussieht. Aus diesem Grund ist ein responsives Design unerlässlich, da es automatisch erkennen kann, mit welchem ​​Gerät Sie auf die Website zugreifen, und es an die Größe Ihres Bildschirms anpassen.

Sie können zwar die gesamte Website so gestalten, dass sie ansprechend ist, aber beim Einbetten von externen Inhalten wird sie nicht unbedingt an den Bildschirm oder das Gerät angepasst, das Ihre Website-Besucher verwenden. Zu Websites, die keine eingebettbaren responsiven Inhalte bieten, gehören Riesen wie YouTube und Instagram, Sie können jedoch einen solchen Dienst wie Responsive einbetten um diesen Inhalt in responsive Einbettungen umzuwandeln.

Die Geschichte des Responsive Webdesigns

Der Begriff Responsive Webdesign stammt nur aus dem Jahr 2010, als er von Ethan Marcotte in einem Artikel über A List Apart geprägt wurde. Er schrieb:

“Wir können Design für ein optimales Seherlebnis gestalten, aber standardbasierte Technologien in unsere Designs einbetten, um sie nicht nur flexibler zu gestalten, sondern auch an die Medien anzupassen, die sie rendern. Kurz gesagt, wir müssen responsives Webdesign üben.”

Jetzt, nur drei Jahre später, wächst die Bedeutung des responsiven Webdesigns immer weiter, und Sie können nicht nur sicherstellen, dass Sie ein beeindruckendes, responsives Design oder Thema verwenden, sondern auch viele interessante responsive Tools, die Sie verwenden können Stellen Sie sicher, dass Sie den Besuchern Ihrer Website eine vollständig reaktionsfähige Umgebung bieten.

Responsive einbetten

Während Ihr Thema also ansprechend sein kann (wie diese Liste an attraktiven ansprechenden WordPress-Themes, erstellen Sie ein erstaunlich ansprechendes Portfolio mit einem dieser kostenlosen WordPress-Themes Website, vor allem wenn Sie ein Fotograf, Künstler oder Grafikdesigner sind. Wenn Ihre Website heutzutage nicht reagiert, gehen Sie wahrscheinlich einen erheblichen Teil des Betrags verloren, und es gibt bestimmte Einbettungen, die sich nicht unbedingt anpassen müssen die Größe des Bildschirms eines Besuchers anpassen. Sie können zwar Inhalte aus Twitter, Storify, SoundCloud und Scribd einbetten, sie haben jedoch bereits alle erforderlichen Schritte für Sie erledigt. Wenn Sie z. B. einen Tweet einbetten, reagiert der Embeded darauf, sodass die Größe des Bildschirms an den Bildschirm Ihres Besuchers angepasst wird.

Es gibt jedoch einige Schuldige, die nicht in der Lage sind, responsive Einbettungen bereitzustellen. Wenn Sie Inhalte von ihren Websites freigeben, wird er automatisch an den Bildschirm angepasst, auf dem er angezeigt wird. Hier kommt Embed Responsively ins Spiel. Wenn Sie sich mit Code auskennen, können Sie den Quellcode jederzeit bearbeiten und in einen Responsive-Code umwandeln. Mit Embed Responsively wird dies jedoch zu einer Copy-Paste-Angelegenheit. Ganz einfach!

Der Service umfasst derzeit Instagram, YouTube, Vimeo, Google Maps und sogar generische iFrame-Einbettungen. Es ist ein Wunder, dass Sites wie diese es nicht geschafft haben, responsive Einbettungen zu verwenden. Aber vielleicht ist deshalb ein Werkzeug wie Embed Responsively gekommen. Sie können auf der Website auf "Mehr" klicken, um eine kleine Liste der beliebtesten Websites anzuzeigen, die aktuell reagieren.

So verwenden Sie den Dienst

Die Verwendung von Embed Responsively könnte nicht einfacher sein. Sie benötigen lediglich den ursprünglichen Einbettungscode des gewünschten Dienstes. Um ein YouTube- oder Vimeo-Video einzubetten, benötigen Sie lediglich den direkten Link zum Video. Wenn Sie ein Instagram-Foto einbetten möchten, ist es dasselbe - rufen Sie einfach den Link zu dem Instagram-Bild im Web. Bei Google Maps dagegen ist es etwas komplexer, da Sie nicht nur einen direkten Link verwenden können - Sie müssen auf den Einbettungscode von Google Map zugreifen.

Um den Einbettungscode für Ihre Google Map zu erhalten, öffnen Sie die Karte und klicken Sie auf den Link-Button in der oberen rechten Ecke der Seitenleiste. Dadurch wird der Code eingebettet, den Sie in Embed Responsively verwenden können. (Wenn Sie noch immer herausfinden möchten, wie Sie persönliche Karten erstellen können, die Sie mit Ihren Freunden und Followern teilen möchten, lesen Sie unseren Leitfaden zum Erstellen von Karten mit Ebenen. Holen Sie sich kreativ und erstellen Sie eigene Karten mit benutzerdefinierten Ebenen auf den neuen Google Maps Machen Sie sich kreativ und erstellen Sie Ihre eigenen Karten mit benutzerdefinierten Ebenen auf den neuen Google Maps. Mit Google wird eine komplett überarbeitete Karte verfügbar, die jetzt für alle verfügbar ist. Das Erstellen eigener Karten ist jetzt einfacher als je zuvor. Sie können private und öffentliche Karten erstellen und Karten mit anderen teilen spezifische Personen, fügen Sie Beschreibungen hinzu ... Lesen Sie weiter.)

Sobald Sie den Link- / Einbettungscode Ihrer Wahl erhalten haben, können Sie ihn in das Fenster „Respons Responsively“ einfügen einfügen. Stellen Sie nur sicher, dass Sie die richtige Registerkarte ausgewählt haben. Klicken Sie auf die Schaltfläche "Einbetten". Die Website generiert einen eingebetteten Code, den Sie auf Ihrer Website oder in Ihrem Blog verwenden können, und der vollständig reagiert.

Fazit

Es ist natürlich offensichtlich, dass Ihre Website von Anfang an reaktionsschnell sein muss, da es die Website ist, die den gesamten Code einwickelt. Embed Responsively ist eine einfache kleine Site, die eine Menge erledigt. Wenn Sie das responsive Design ernst meinen und Ihren Besuchern eine nahtlose Erfahrung bieten möchten, möchten Sie diese Website zu Ihrem Arsenal an Blogging-Tools hinzufügen.

Was denkst du über Embed Responsively? Lass es uns in den Kommentaren wissen.

Bildnachweis: Leere Tablette über PlaceIt

Erfahren Sie mehr über: Google Maps, Instagram, Webdesign, Webentwicklung, YouTube.