Generator für responsiven Embed-Code (YouTube, Vimeo, Maps, Calendly) | We.Inc
Füge einen YouTube-, Vimeo-, Google-Maps-, Calendly-, Spotify-, Loom- oder Google-Forms-Link ein und erhalte responsiven, verzögert geladenen iframe-Code mit barrierefreiem Titel, Live-Vorschau und Datenschutzhinweis zu jedem Anbieter.
Füge einen Link eines unterstützten Anbieters ein, wähle ein Seitenverhältnis und gib dem Embed einen Titel. Du erhältst iframe-Code, der sich an jede Bildschirmbreite anpasst, erst beim Scrollen in die Nähe geladen wird und einen Titel für Screenreader enthält. Eine Live-Vorschau zeigt das Ergebnis; ein Hinweis zu jedem Anbieter erklärt, was er möglicherweise erfasst und ob eine datenschutzfreundliche Option vorhanden ist. Alles läuft in deinem Browser. Nichts, was du eingibst oder hochlädst, wird an We.Inc oder andere gesendet.
Füge einen Link ein: ein YouTube- oder Vimeo-Video, einen Google-Maps-Embed-Link, eine Calendly-Buchungsseite, einen Spotify-Titel oder eine Playlist, ein Loom-Video oder ein Google-Formular.
Das Tool erkennt den Anbieter und schreibt den Link in dessen offizielle Embed-Adresse um. Nicht erkannte Links werden abgelehnt, statt die Adresse zu erraten.
Wähle das Seitenverhältnis (16:9 für Videos, 4:3, 1:1 oder eine feste Höhe für Buchungsseiten und Formulare) und schreibe einen Titel, der den Embed-Inhalt beschreibt.
Wähle das Ladeverhalten. Verzögertes Laden ist standardmäßig aktiviert, damit der Embed die erste Anzeige der Seite nicht verlangsamt.
Prüfe die Live-Vorschau und kopiere anschließend das HTML. Der Anbieterhinweis nennt, was du in deiner Datenschutz- oder Cookie-Erklärung erwähnen solltest.
Gib jedem iframe einen Titel, der seinen Inhalt beschreibt, zum Beispiel „Karte zu unserem Geschäft in der King Street“. Screenreader lesen ihn vor.
Verwende youtube-nocookie.com für YouTube-Videos. Dadurch werden YouTube-Cookies erst gesetzt, wenn der Besucher auf Wiedergabe klickt.
Platziere umfangreiche Embeds unterhalb des ersten sichtbaren Bereichs oder lade sie verzögert. Jeder lädt eine ganze Seite von einer anderen Website.
Buchungs-, Chat- und Formular-Widgets gehören zum Angebot des jeweiligen Anbieters, nicht zu deiner Website. Dessen Bedingungen und Datenverarbeitung gelten.
Wähle für Google Maps „Teilen“, dann „Karte einbetten“, und kopiere die Adresse innerhalb von src. Ein normaler Maps-Link kann nicht eingebettet werden.
Häufige Fragen
Wie mache ich einen iframe responsiv?
Umschließe ihn mit einem Container, der aspect-ratio (zum Beispiel 16 / 9) und width: 100% festlegt, und lasse den iframe den Container ausfüllen. Ältere Websites verwendeten einen padding-top-Trick; aspect-ratio wird von allen aktuellen Browsern unterstützt. Dieses Tool gibt die moderne Variante aus.
Welche Anbieter werden unterstützt?
YouTube (auch Shorts und youtu.be-Links), Vimeo, Google-Maps-Embed-Links, Calendly, Spotify, Loom und Google Forms. Jeder hat eine dokumentierte Embed-Adresse. Andere Links werden abgelehnt, damit das Tool keinen Code ausgibt, der nicht funktioniert.
Beeinträchtigt verzögertes Laden den Embed?
Nein. loading="lazy" weist den Browser an, den iframe erst abzurufen, wenn er sich dem sichtbaren Seitenbereich nähert. Besucher, die dorthin scrollen, sehen ihn wie gewohnt laden.
Bietet We.Inc Buchungen oder Chat an?
Nein. Calendly und ähnliche Tools sind separate Dienste, bei denen du dich direkt anmeldest. Dieses Tool erzeugt lediglich den Code, mit dem du deren Widget auf deiner Seite anzeigen kannst.
Warum funktioniert mein Google-Maps-Link nicht?
Normale maps.google.com- und goo.gl-Links verhindern das Einbetten. Öffne den Ort in Google Maps, wähle „Teilen“ und dann „Karte einbetten“. Füge die Adresse aus dem src-Teil des angezeigten Codes ein.
Welche Auswirkungen jeder Embed auf Besucher hat
Ein Embed ist ein kleines Fenster zu einer Seite eines anderen Unternehmens. Er lädt dessen Skripte, kann dessen Cookies setzen und macht deine Seite größer. Das ist oft sinnvoll, sollte aber eine bewusste Entscheidung sein: Lade Embeds unterhalb des ersten sichtbaren Bereichs verzögert, verwende verfügbare datenschutzfreundliche Modi und erwähne Einbettungen von Drittanbietern in deiner Datenschutzerklärung.
Barrierefreie Embeds
Screenreader kündigen einen iframe mit seinem Titel an. Fehlt der Titel, hören Besucher nur „Frame“ und sonst nichts. Ein aussagekräftiger Titel, ein Textlink zum selben Inhalt unter dem Embed und Untertitel bei Videos machen eingebettete Inhalte für alle zugänglich.