Zum Inhalt

YouTube-Video ohne Videovorschläge in WordPress einbetten

YouTube-Videos in WordPress einbetten: Eine vollständige Anleitung

Videos sind aus modernen Webseiten nicht mehr wegzudenken. Sie veranschaulichen Inhalte, steigern die Aufmerksamkeit und binden Besucher länger an deine Seite. Für Blogger, Unternehmen und Content Creator ist es deshalb entscheidend zu wissen, wie man ein YouTube-Video in WordPress sauber einbettet. Neben der optischen Wirkung ergeben sich auch Vorteile für die Suchmaschinenoptimierung, die du nicht unterschätzen solltest.

Warum eingebettete Videos sinnvoll sind

Ein eingebettetes YouTube-Video verleiht einem Beitrag Dynamik. Besucher konsumieren nicht nur Text, sondern haben die Möglichkeit, Inhalte in einem anderen Format zu erleben. Das steigert die Chance, dass deine Botschaft wirklich ankommt.

Darüber hinaus hat Video-Content nachweislich einen positiven Einfluss auf die Verweildauer. Wer ein Video anschaut, bleibt länger auf der Seite. Suchmaschinen registrieren dieses Verhalten und interpretieren es als Signal für hochwertigen Content. Zusätzlich eröffnet YouTube selbst eine weitere Reichweite, da dein Video parallel auf der Plattform auffindbar ist und Traffic auf deine Webseite zurücklenken kann.

Schritt für Schritt: So fügst du ein YouTube-Video in WordPress ein

Der Einbettungsvorgang selbst ist unkompliziert, aber kleine Details entscheiden über die Qualität.

  1. Video auswählen und Code kopieren
    Rufe das gewünschte Video auf YouTube auf, klicke zuerst auf „Teilen“. Klicke dann auf „Einbetten“. Den dort generierten iFrame-Code kopierst du in die Zwischenablage.
  2. In WordPress einfügen
    Im Gutenberg-Editor hast du zwei Möglichkeiten: Nutze den Block „YouTube“ oder füge den iFrame in einen „Individuelles HTML“-Block ein. Arbeitest du mit dem klassischen Editor, wechselst du auf die HTML-Ansicht und setzt den Code dort ein.
  3. Option für keine weiteren Videos hinzufügen
    Damit nach dem Abspielen des YouTube Videos auch keine weiteren Videos angezeigt werden, muss der Parameter ?rel=0 am Ende des Links hinzugefügt werden. Aber Achtung: Befindet sich bereits ein ? in der URL, dann muss dieses durch ein & ersetzt werden.
  4. Responsivität sicherstellen
    Damit das Video auf allen Endgeräten optimal angezeigt wird, sollte es responsive eingebettet sein. Anstatt einer festen Breite von 560 Pixeln ist es besser, width="100%" zu verwenden. Falls dein Theme dies nicht automatisch unterstützt, kannst du es mit einfachem CSS nachrüsten.
  5. Vorschaubild optimieren
    Standardmäßig liefert YouTube ein Thumbnail mit, doch ein individuelles Vorschaubild wirkt professioneller. Lade dazu ein Bild hoch, das thematisch passt, klar erkennbar ist und neugierig macht. Achte darauf, die Datei zu komprimieren und mit einem sprechenden Dateinamen sowie einem Alt-Text zu versehen.
  6. Ladezeit im Blick behalten
    Da iFrames die Performance beeinträchtigen können, empfiehlt es sich, Lazy Loading zu aktivieren. Dann wird das Video erst dann geladen, wenn es in den sichtbaren Bereich scrollt oder aktiv gestartet wird. Das schont Ressourcen und verbessert die Core Web Vitals deiner Seite.

Video auswählen, Code kopieren und Parameter setzen

Nochmal im Detail: Auf YouTube findest du unterhalb des gewünschten Videos die Schaltfläche „Teilen“.

Wähle dann „Einbetten“ aus, damit der HTML Code angezeigt wird.

Dort lässt sich ein Einbettungscode generieren, den du – zB mit dem Button rechts unten – kopierst.

In WordPress fügst du diesen Code entweder in den Block „Individuelles HTML“ ein oder nutzt direkt den YouTube-Block, falls du mit dem Gutenberg-Editor arbeitest. Auch im klassischen Editor funktioniert es, wenn du auf die HTML-Ansicht wechselst.

Damit nach dem Abspielen des YouTube Videos auch keine weiteren Videos angezeigt werden, muss der Parameter ?rel=0 am Ende des Links hinzugefügt werden. Aber Achtung: Befindet sich bereits ein ? in der URL, dann muss dieses durch ein & ersetzt werden.

Wichtig dabei ist den Parameter ?rel=0 am Ende der URL unter src="" hinzuzufügen.

src="https://www.youtube.com/embed/HJBND-1sxgc?si=N9WPDnYvkm5uQ0Sy&rel=0"

Und hier der gesamte Code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/HJBND-1sxgc?si=N9WPDnYvkm5uQ0Sy&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer;autoplay; clipboard-write;encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Beispiel: HTML & CSS für responsives Embed

Dieser HTML Code bindet über einen iframe ein externes YouTube Video ein. Gutenberg und auch andere Page Builder erstellen auch teilweise schon automatisch den Code im Hintergrund, wenn ein YouTube Video Link eingefügt wird.

Sollte dies aber nicht automatisch passieren, so kannst du zB. diesen Code verwenden. Wichtig dabei ist, DEINE_VIDEO_ID richtig zu setzen. Bzw. kannst du den Code auch direkt über den Teilen-Button unter einbetten abrufen.

<div class="video-container">
  <iframe width="560" height="315"
    src="https://www.youtube.com/embed/DEINE_VIDEO_ID"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

Der CSS Code dient der grafischen Darstellung und muss ggf. noch angepasst werden. Das ist abhängig von deinen Klassen-Namen, verwendetem WordPress Theme, sowie deinen weiteren Plugins. Außerdem kann es auch sein, dass noch mobile Anpassungen notwendig sind.

Versuche die Integrierung zuerst einmal ohne CSS – sollte die Ansicht passen, brauchst du diesen Code auch nicht einzufügen.

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Verhältnis */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Das Zusammenspiel von Bildern und Video

Neben dem eigentlichen Video spielen auch die begleitenden Screenshots eine wichtige Rolle. Zeige beispielsweise den Schritt, wie du den Code bei YouTube kopierst, oder wie er im WordPress-Editor eingefügt wird. Diese visuellen Hilfen erleichtern das Verständnis.

Achte darauf, dass die Bilder suchmaschinenfreundlich aufbereitet sind: Dateigröße reduzieren, Dateiname mit relevanten Keywords versehen und Alt-Text hinzufügen. So trägst du nicht nur zur besseren Performance, sondern auch zur Auffindbarkeit bei.

SEO-Vorteile von YouTube-Einbettungen

Das Einbinden von YouTube-Videos kann gleich mehrere SEO-Aspekte positiv beeinflussen:

  • Längere Verweildauer: Nutzer beschäftigen sich intensiver mit der Seite.
  • Bessere Nutzererfahrung: Verschiedene Medienformen decken unterschiedliche Vorlieben ab.
  • Zusätzliche Reichweite: Dein Video kann über YouTube gefunden werden und Besucher auf die Website leiten.
  • Höhere Sichtbarkeit in Google: Videos erscheinen oft in speziellen Karussells oder mit Thumbnails in den Suchergebnissen.
  • Positive Wirkung auf Mobile SEO: Responsiv eingebettete Videos verbessern die Usability auf Smartphones.

In Kombination mit einer durchdachten Textbeschreibung rund um das Video, relevanten Keywords und optimierten Bildern ergibt sich ein starkes Gesamtpaket, das sowohl Menschen als auch Suchmaschinen überzeugt.

Häufige Fehler und ihre Folgen

Viele Fehler entstehen aus Eile: Manche setzen den Embed-Code einfach ein, ohne sich Gedanken über Responsivität oder Ladezeiten zu machen. Auf Mobilgeräten führt das zu abgeschnittenen Videos, was die Nutzererfahrung massiv beeinträchtigt. Ebenso problematisch ist es, wenn keinerlei Kontext vorhanden ist. Suchmaschinen können den Inhalt des Videos allein nicht interpretieren – ein begleitender Text ist daher unverzichtbar.

Auch Autoplay solltest du vermeiden. Viele Nutzer empfinden es als störend, wenn beim Laden der Seite automatisch ein Video startet. Schließlich darf die Performance nicht vernachlässigt werden. Große Bilddateien oder fehlendes Lazy Loading können die Ladezeit erheblich verlängern und so das Ranking schwächen.

FAQ

FrageAntwort
Muss ich ein Plugin verwenden, um YouTube-Videos einzubetten?Nein, WordPress bietet schon Standard-Blöcke oder HTML-Code Einbettung an. Plugins können zusätzliche Features wie Lazy Load, Vorschaubilder oder Designanpassungen bieten.
Wie wichtig ist das Vorschaubild?Sehr wichtig – Nutzer klicken eher bei ansprechenden Thumbnails. Zudem kann ein optimiertes Vorschaubild die Ladezeit beeinflussen und die visuelle Qualität deiner Seite verbessern.
Beeinflusst das Einbetten eines Videos mein Seitenladezeit stark?Wenn nicht optimiert (großes iFrame, kein Lazy Load), ja. Aber mit responsivem Embed und Lazy Loading kannst du Ladezeitprobleme minimieren.
Wie nutze ich Keywords sinnvoll rund ums Video?Verwende das Hauptkeyword im Titel des Beitrags, in Überschriften, im Alt-Text der Bilder und in der Textbeschreibung rund ums Video. Auch eine kurze Transkription hilft.
Wird der Inhalt des Videos von Google erkannt?Google kann Metadaten erkennen, das Video selbst nicht komplett „lesen“. Texte um das Video, Transkripte oder Beschreibungen helfen Google, das Thema zu erfassen.

Kunden
Bewertungen

4.95

20 Bewertungen