Die Embed-Komponente dient dazu, externe Inhalte wie Videos, Karten oder Social-Media-Beiträge direkt auf einer Webseite einzubinden. Sie stellt dabei technisch einen Slot bereit und ermöglicht die Einbindung
Die Embed-Komponente macht Seiten lebendiger, indem sie ganz einfach multimediale Inhalte ergänzt. Externe Inhalte lassen sich direkt einbinden, ohne dass Nutzer:innen die Seite verlassen müssen. Das sorgt für ein durchgängiges Nutzungserlebnis. Gleichzeitig bleiben eingebettete Inhalte gestalterisch einheitlich und passen sich dem bestehenden Layout an.
In den Komponent-Einstellung muss zunächst der jeweilige Integrations-Typ ausgewählt werden. Je nach Typ erscheinen weitere Felder zur Anpassung.
Externe Inhalte lassen sich über eine URL einbinden, sofern diese den technischen Anforderungen einer gültigen Embed-URL entspricht.
Ungültige oder nicht unterstützte URLs führen zu einer Fehlermeldung, wodurch die Eingabe nicht übernommen werden kann.
Der Typ "Embeddable" ermöglicht die gezielte Einbettung externer Inhalte aus vertrauenswürdigen Quellen, beispielsweise über einen iFrame.
Ein iFrame ist ein HTML-Element, über das externe Inhalte in die Webseite gezogen werden, also ein Fenster in einer Webseite.
Wichtig: Höhe und Breite legen nur die Höhe und Breite des iFrame fest, NICHT die Höhe und Breite des Inhalts. Im besten Fall ist der iFrame Inhalt adaptiv und passt sich an, ansonsten müssen Höhe und Breite zum Inhalt passen.
Der Typ "Embeddable" ermöglicht die gezielte Einbettung externer Inhalte aus vertrauenswürdigen Quellen, beispielsweise über die Video-Plattform Vimeo.
Wichtig: Die primär zu nutzende Videoplattform für Coop Videos ist Vimeo. Nur in einigen besondern Fällen können Videos auf YouTube hochgeladen werden, beispielsweise öffentliche Werbevideos.
Der Typ "Embeddable" ermöglicht die gezielte Einbettung externer Inhalte aus vertrauenswürdigen Quellen, beispielsweise über die Video-Plattform YouTube.
Wichtig: Die primär zu nutzende Videoplattform für Coop Videos ist Vimeo. Nur in einigen besondern Fällen können Videos auf YouTube hochgeladen werden, beispielsweise öffentliche Werbevideos.
Der Embed-Typ HTML ermöglicht das direkte Einfügen von benutzerdefiniertem HTML-Code.
Redakteur:innen können den HTML-Code frei eingeben oder einfügen, um beispielsweise iframe-Elemente, Skripte oder andere HTML-Strukturen einzubinden. Dabei ist sicherzustellen, dass der eingefügte Code gültig und sicher ist.
In Bezug auf Barrierefreiheit (Accessibility) gibt es einige wichtige Punkte zu beachten, so dass eingebettete Inhalte für alle Benutzer:innen – einschließlich solcher mit Einschränkungen– zugänglich sind.
Ein iFrame ist in der Regel nicht automatisch barrierefrei. Daher sollten iFrames ein aussagekräftiges title-Attribut haben. Ohne title können Screenreader den Inhalt nicht sinnvoll identifizieren.
Ebenso ist empfehlenswert eine Beschreibung oder Alternativtext außerhalb des iFrames zu platzieren, um die Einbetting nachvollziehbarer zu machen.
Inhalte, die per Embed eingebettet sind (z. B. YouTube-Player), müssen per Tastatur bedienbar sein.
Hinweise:
Die Embed-Inhalte sollten sich an Bildschirmgrößen anpassen und Zoom bis 200 % ohne Verlust von Inhalt/Funktion erlauben.
Eingebettete Inhalte sollten ausreichenden Farbkontrast haben und keine Infos nur über Farbe vermitteln.
Für bessere Barrierefreiheit Auto-Play vermeiden oder sicherstellen, dass der Nutzer stoppen/pause/schließen kann.
Empfohlene Einstellungen für ein Vimeo-Video (Beispiel)
Die Embed-Component stellt lediglich das technische Gerüst zum Einbetten externer Inhalte bereit. Sie kann nur eingeschränkt Einfluss auf die Barrierefreiheit des eingebetteten Materials selbst nehmen.
Das bedeutet: Auch wenn die Komponente korrekt implementiert ist, bleibt der eingebettete Inhalt (wie etwa ein Video) der entscheidende Faktor. Nur wenn dieser Inhalt selbst barrierefrei gestaltet ist,etwa durch Untertitel, ausreichende Kontraste oder Tastaturbedienbarkeit, ist das Gesamterlebnis für User:innen mit Einschränkungen wirklich zugänglich.
Ja, die Datenschutzrichtlinien sollte bei jeder Einbindung externer Inhalte geprüft und sicher sein. Das gilt besonders dann, wenn der eingebundene Dienst eigenes Tracking und/oder eigene Cookies verwendet. Bei Unsicherheiten hilft die Datenschutzabteilung weiter.
Plattformen wie YouTube oder Vimeo stellen eigene Embed-Codes über die Teilen-Option bereit. Weitere Dienste bieten oftmals zusätzlich einen eigenen Embed-Code oder können einen Embed-Code auf Rückfrage bereitstellen.
Ja, es ist grundsätzlich mögliche mehrere eingebettete Inhalte auf einer Seite zu verwenden. Dabei ist zu beachten, dass externe Inhalte die Seitenladezeit beeinflussen können. Es sollten daher nur ausgewählte und nicht zu viele Embed-Komponenten genutzt werden.
Die Einbettung wird nicht korrekt angezeigt oder blockiert. Es muss auf unterstütze Formate und Anbieter geachtet werden.
Anpassungen sind je nach Dienst direkt in den dortigen Einstellungen verfügbar, beispielsweise bietet Vimeo verschiedene Player-Optionen an. Individuelle Anpassungen (Customizations) über Variablen oder externes CSS ist nicht notwendig und sollte nicht ohne Weiteres
Für Videos z. B. bietet die Embed-Komponente verschiedene Player-Optionen. Weitere Anpassungen sind je nach Dienst über Embed-Code möglich, sollten jedoch zum Gesamtlayout der Seite passen.
Ja, die Embed-Komponente ist responsiv. Allerdings hängt die Darstellung auch vom externen Dienst ab und kann nicht ohne Einschränkungen garantiert werden. Die Darstellung sollte daher zuvor geprüft sein.
Zuerst die URL oder den Embed-Code auf Richtigkeit prüfen. Schon ein kleiner Kopierfehler wie eine fehlende Abschlussklammer im Code, ein Leerzeichen zuviel oder ein Zahlendreher in der URL sorgen dafür, dass die Inhalte nicht richtig ausgegeben werden.
Sind alle Details richtig, sollte der technische Support oder jeweilige Anbieter des Embed-Codes kontaktiert werden.