Embed Responsivly und Embed.ly

Tool 1: Embed Responsivly

Embed Responsivly erlaubt es, Videos verschiedener Anbieter so in eine Webseite einzubetten, dass sie nicht nur auf dem Desktop, sondern auch auf dem Tablett oder Smartphone vernünftig angesehen werden können.

Eingebettet werden können

  • YouTube
  • Vimeo
  • Dailymotion
  • Google Maps
  • Getty Images
  • Generic iFrame -> für beliebige Webseiten

Mittels dieses kleinen Tools kann für Videos verschiedener Anbieter aber auch Bilder, Karten und Seiten ein i-frame-Code generiert werden, der dann mit ein paar HTML-Kenntnissen gut angepasst werden kann.

Für dieses YouTube-Video wurde nicht der Embedd-Code von YouTube verwendet. Sondern ich habe den Link, den über Teilen erhalte genommen und bei Embed Responsivly ind den Schlitz der Registerkarte YouTube eingegeben. Das Programm hat einen i-Frame-Code erstellt, den ich hier in diesen Beitrag hineinkopiert habe. Das so eingebundene Video zeigt eine Anleitung zur Einbindung einer Webseite über die Option Generic iFrame. (in Engl.)

Mit diesem Angebot haben Sie die Möglichkeit, Webangebote zu optimieren, damit Sie auch auf verschiedenen Geräten gut angezeigt werden können.
Grenze bei der eingebundenen Seite sind deren Vorgaben, d.h. der iFrame ist zwar flexibel, aber er überschreibt nicht die Vorgaben der eingebetteten Seite und macht diese voll responsiv. Um dies zu demonstrieren, habe ich die Container-Größe entsprechend vorangepasst. – Wichtig als Info: Es können nicht alle Seiten in eine andere Seite eingebettet werden., z.B. wenn das Hypertextprotokoll mit dem der eigenen Seite nicht übereinstimmt (z.B. https:// und http://)

2. Tool: Embedly

Ein weiteres Tool ist Embed.ly.

Bei Embed.ly fügen Sie einfach die Internetadresse ein. Sei es von einer Webseite oder von gängigen Video- und Socialmediaplattformen. Bestätigen Sie die Eingabe mit dem Button „Embed“.

Auf der nächsten Seite erhalten Sie eine Vorschau und weitere Einstellungsmöglichkeiten. Sie können hier die Breite = Width angeben. Meine Empfehlung: arbeiten Sie mit Prozentzahlen, z. B. 80%, um responsive zu bleiben. Entfernen Sie zudem den Haken bei Social Buttons.

Unter der Vorschau erhalten Sie den Einbettungscode, den Sie dann in ihre Seite einbetten können. (Grau auf hellgrauem Hintergrund).

Embedly gestaltet den iFrame als hübsche Karte mit einem Link zur eingebetten Seite. Allerdings erhalten diese „Karten“ ein sogenanntes Branding von Embed.ly, d.h. Nutzer sehen, deutlich, mit welchem Tool die iFrames erstellt wurden.

Hier mein Beispiel:

Netzwerkeln-Adventskalender

Hinter jedem Türchen versteckt sich der Hinweis auf ein Tool, welches in Bibliotheken erfolgreich eingesetzt wird. Der Adventskalender beinhaltet die Verlinkungen auf die Beiträge, die im Rahmen der Aktion 24 Tage = 24 Tools aus dem Netz im Einsatz für Bibliotheken entstanden sind.

Vorstellbar wäre so die Einbindung mehrerer in einer Schulung genannten Seiten als Linkverzeichnis mit Vorschau für Schulungsteilnehmer oder eine schöne Galerie und Zusammenfassung von ausgewählten Reaktionen von Instagram- und Tweets zu einer Veranstaltung.

Dieser Blogbeitrag ist Teil der der Adventskalender Blogparade 24 Tools aus dem Netz im Einsatz für Bibliotheken #netzadvent2020:
Logo von Netzwerkeln mit Weihnachtsmütze