So füge ich Videos zu WordPress hinzu, ohne meine Website zu verlangsamen 

Wenn ich eine hochkonvertierende Landingpage erstelle, denke ich fast immer zuerst daran, ein Video einzubauen. Es ist der schnellste Weg, Vertrauen aufzubauen, aber nur, wenn es für den Nutzer nahtlos abgespielt wird.

Die meisten Tutorials zeigen Ihnen, wie Sie eine URL einfügen und es dabei belassen. Was sie überspringen, ist, warum Ihr Video Ihre Seiten-Geschwindigkeit beeinträchtigen könnte und was Sie stattdessen tun sollten.

Wenn Sie die Schritte kennen, dauert das Einbetten von Videos in WordPress weniger als zwei Minuten. In dieser Anleitung führe ich Sie durch jede Methode, die ich verwende, einschließlich, wie Sie Ihre Seiten danach schnell halten.

Warum Videos zu Ihrer WordPress-Website hinzufügen?

82 % der Video-Marketer berichten von erhöhtem Web-Traffic nach dem Hinzufügen von Videos zu ihren Inhalten. Das ist ein guter Grund, Videos auf Ihrer WordPress-Website zu verwenden.

Das Hinzufügen von hochwertigen Videos kann Ihr WordPress SEO verbessern und es den Menschen erleichtern, Sie zu finden.

Sollte ich Videos direkt auf WordPress hochladen?

Es ist besser, Videos von Plattformen wie YouTube oder Vimeo einzubetten, als sie direkt auf WordPress hochzuladen.

Obwohl Sie Videos in Ihre Mediathek hochladen können, empfehle ich es nicht. Bei SeedProd betten wir Videos immer stattdessen ein, und hier ist der Grund:

• Große Dateigrößen: Videos beanspruchen viel Speicherplatz und können Ihre Website verlangsamen, was sich negativ auf die Benutzererfahrung und das SEO auswirkt.
• Hohe Bandbreitennutzung: Video-Streaming verbraucht erhebliche Serverressourcen. Wenn Ihr Hosting-Plan Limits hat, könnten Sie diese schnell erreichen und zusätzliche Kosten entstehen.
• Zusätzliche Traffic-Möglichkeiten: Das Hochladen auf Plattformen wie YouTube oder Vimeo ermöglicht es Ihnen, deren Zielgruppen zu erreichen und mehr Besucher auf Ihre Website zu leiten.

Das Einbetten oder die Verwendung eines WordPress-Video-Plugins ist der effizienteste Weg, um Ihre Website schnell und zugänglich zu halten und gleichzeitig Ihre Reichweite zu erhöhen.

Wo Sie Ihr Video vor dem Einbetten hosten sollten

Bevor Sie ein Video einbetten können, muss es irgendwo leben. Hier sind die drei häufigsten Optionen.

Plattform	Kosten	Am besten für	Kompromiss
YouTube	Kostenlos	Entdeckung, öffentlich zugängliche Inhalte	Zeigt verwandte Videos am Ende an; Branding kann im kostenlosen Plan nicht entfernt werden
Vimeo	Kostenlose Stufe; kostenpflichtige Pläne ab 20 $/Monat	Verkaufsseiten, professionelle Videos	Keine Konkurrenzvideos; kostenpflichtiger Plan für Geschäftsfunktionen erforderlich
Selbst gehostet mit CDN	Variiert (Hosting + CDN-Kosten)	Gated oder Premium-Videoinhalte	Volle Kontrolle; höhere Kosten und mehr Einrichtungsaufwand erforderlich

Für die meisten Websites ist YouTube die richtige Wahl: kostenlos, schnell und gut für die Entdeckung. Wenn Sie Videos für Verkaufsseiten verwenden oder am Ende keine Konkurrenzwerbung wünschen, lohnt sich der kostenpflichtige Plan von Vimeo.

So betten Sie Videos in WordPress ein: 4 Wege

Es gibt verschiedene Möglichkeiten, ein Video in WordPress einzubetten. Im Folgenden teile ich die Methoden, die ich am häufigsten verwende, vom einfachsten Einfügen bis zur iFrame-Methode für nicht standardmäßige Plattformen.

Methode 1: Ein Video in WordPress-Beiträgen und -Seiten einbetten (Block-Editor-Methode)

Der WordPress Block Editor, oder Gutenberg, bietet eine einfache Möglichkeit, Videos in Ihre WordPress-Beiträge und -Seiten einzubetten.

Zuerst benötigen Sie die Video-URL, die Sie einbetten möchten. Wenn Sie eine Plattform wie YouTube verwenden, navigieren Sie zu dem Video und kopieren Sie die URL aus der Adressleiste. Sie können auch auf das Freigabesymbol klicken und die Video-URL von dort kopieren.

Navigieren Sie als Nächstes zu dem Beitrag oder der Seite, auf der Sie das Video hinzufügen möchten, und klicken Sie auf „Bearbeiten“, um den WordPress Block-Editor zu öffnen.

Klicken Sie irgendwo in den WordPress Block-Editor und fügen Sie die zuvor kopierte URL ein. Sobald Sie die Video-URL einfügen, ruft WordPress automatisch den Einbettungscode ab und zeigt das Video im Inhaltseditor an.

Als Nächstes können Sie das Video anpassen, indem Sie auf die Optionen in der Popup-Symbolleiste klicken. Sie können beispielsweise die Videobreite, Ausrichtung, Untertitel, das Seitenverhältnis und mehr ändern.

WordPress kann nur autorisierte Plattformen automatisch einbetten, einschließlich:

• Amazon
• Dailymotion
• Facebook
• Imgur
• Instagram
• Reddit
• SoundCloud
• Spotify
• Twitter
• Vimeo
• YouTube
• Und mehr.

Wenn Sie Videos von Websites einbetten möchten, die nicht auf der Whitelist stehen, müssen Sie den vollständigen HTML-Code des Videos kopieren und einfügen. Fügen Sie einfach einen neuen Block namens Benutzerdefiniertes HTML hinzu und fügen Sie den Videocode ein, um dies zu tun.

Der letzte Schritt ist das Speichern und Veröffentlichen Ihres Beitrags oder Ihrer Seite, um das Video live zu schalten.

Wenn Sie immer noch den klassischen Editor verwenden, können Sie die URL des Videos kopieren und direkt in den WordPress-Editor einfügen. Wie zuvor wird das Video automatisch geladen.

Methode 2: Video überall auf Ihrer WordPress-Website mit SeedProd hinzufügen

Wenn Sie einen individuelleren Ansatz zum Einbetten von Videos in WordPress suchen, bietet SeedProd eine einfache und dennoch leistungsstarke Lösung.

SeedProd ist ein Drag-and-Drop-Website-Builder, mit dem Sie Videos zu jedem Teil Ihrer Website hinzufügen können: Landing Pages, Theme-Vorlagen, Seitenleisten, ohne Code anfassen zu müssen.

Zuerst müssen Sie das SeedProd-Plugin installieren und aktivieren.

Hilfe hierzu finden Sie in unserer Dokumentation zur Installation von SeedProd. Dort wird erklärt, wie Sie das Plugin und Ihren Lizenzschlüssel herunterladen, installieren und aktivieren.

Jetzt können Sie Videos mit dem Drag-and-Drop-Builder von SeedProd zu Ihrer Website hinzufügen.

Videos zu einer WordPress-Landingpage hinzufügen

Mit SeedProd ist das Hinzufügen eines Videos zu Ihrer Landing Page ein Kinderspiel. Navigieren Sie in Ihrem WordPress-Dashboard zu SeedProd » Landing Page Builder und erstellen Sie entweder eine neue Landing Page oder bearbeiten Sie eine vorhandene WordPress-Seite.

Sobald Sie sich im Seitenersteller befinden, haben Sie 2 Optionen zum Einbetten von Videoinhalten. Sie können den Standard-Video-Block oder den erweiterten Video-Popup-Block verwenden.

Hinzufügen des Video-Blocks

Um den Video-Block zu verwenden, finden Sie ihn in der linken Seitenleiste und ziehen Sie ihn per Drag & Drop in Ihr Landing Page-Layout.

Sie können in den Blockeinstellungen aus 2 Videoquellen wählen: YouTube und Benutzerdefiniert.

Die YouTube-Quelle ermöglicht es Ihnen, einen YouTube-Videolink einzufügen, und bettet den Video-Code automatisch ein. Anschließend können Sie die Videobreite, Ausrichtung und Sichtbarkeit auf Desktop- oder Mobilgeräten mit wenigen Klicks anpassen.

Wenn Sie die Option Benutzerdefiniert auswählen, können Sie ein Video in WordPress ohne YouTube einbetten. Dazu müssen Sie den Video-Einbettungscode kopieren und in das Feld Benutzerdefinierter Videocode einfügen.

Hinzufügen des Video-Pop-up-Blocks

SeedProds Video-Pop-up-Block bietet viele weitere Anpassungsoptionen als der Standardblock. Sie finden ihn in der Seitenleiste Erweiterte Blöcke und ziehen ihn dann per Drag & Drop auf Ihre Seite.

In den Blockeinstellungen gibt es mehrere Videoquellenoptionen.

Sie können Videoinhalte automatisch von YouTube oder Vimeo einbetten, indem Sie den Videolink einfügen.

Alternativ können Sie mit der Option Benutzerdefiniert ein Video von Ihrem Computer hochladen oder einen Videolink von einer externen Website einfügen.

Nachdem Sie die Videoquelle ausgewählt haben, können Sie den Videoplayer anpassen, indem Sie verschiedene Funktionen aktivieren, darunter:

• Bescheidenes Branding: Verbergen Sie das YouTube-Branding aus Ihrem Videoplayer.
• Datenschutzmodus: Verhindern Sie, dass YouTube oder Vimeo Besucherinformationen speichern, es sei denn, sie spielen das Video ab.
• Lazy Loading: Verbessern Sie die Ladezeit Ihrer Seite, indem Sie Videos laden, nachdem die Seite geladen wurde.

Zusätzlich stellt die Aktivierung der Funktion Sticky Video sicher, dass das Video beim Scrollen am unteren Bildschirmrand haften bleibt, wenn Benutzer diese Seite besuchen.

Halten Sie die Aufmerksamkeit eines Besuchers auf Ihrer Kernbotschaft, auch wenn er scrollt.

Zuletzt verfügt der Video-Pop-up-Block über eine Option Video-Overlay, mit der Sie ein benutzerdefiniertes Video-Thumbnail und ein Wiedergabesymbol hochladen können.

Sie können sogar die Lightbox-Option aktivieren, sodass das Video in einem Lightbox-Popup geöffnet wird, wenn ein Benutzer darauf klickt.

Auf einer Landing Page verwende ich das Video-Popup mit einem benutzerdefinierten Thumbnail und der Lightbox-Option. Der Besucher sieht ein sauberes Bild, bis er sich entscheidet, es anzusehen. Das Video öffnet sich im Vollbildmodus, wenn er bereit ist, ohne Autoplay und ohne Verlangsamung der Seite. Das ist das Setup, das ich auf meinen eigenen SeedProd-Landing-Pages verwende.

Eine vollständige Anleitung zur Anpassung finden Sie in unserem Tutorial zum Thema Erstellen einer Video-Landingpage in WordPress.

Wenn Sie mit Ihrem Video und den Anpassungen der Landingpage zufrieden sind, klicken Sie auf die Schaltfläche Speichern und Veröffentlichen, um die Änderungen live zu schalten.

Hier ist ein Beispiel für das endgültige Video, nachdem es mit SeedProd in WordPress hinzugefügt wurde:

Ein Video in Ihr WordPress-Theme einbetten

Sie können lernen, wie das geht, indem Sie dieser Anleitung zum Erstellen eines WordPress-Themes folgen.

Das Hinzufügen von Videos zu verschiedenen Teilen Ihres WordPress-Themes folgt ähnlichen Schritten wie die Landing-Page-Option. Alles, was Sie tun müssen, ist SeedProd » Theme Builder zu besuchen und eine der Theme-Vorlagen zu bearbeiten.

Sie können zum Beispiel die Seitenleisten-Vorlage öffnen und einen der Videoblöcke darüber ziehen, um ein Video in Ihre WordPress-Seitenleiste einzubetten.

So sehen die Änderungen nach dem Speichern aus:

Oder Sie können die Footer-Vorlage bearbeiten, um neue Videoinhalte zu Ihren Footer-Widgets hinzuzufügen.

Es ist wirklich so einfach, und Sie müssen dafür keinen Code von Grund auf neu schreiben oder einen Entwickler beauftragen.

Methode 3: WordPress-Video-Plugins zum Einbetten und Anpassen von Videos verwenden

Wenn Sie nach erweiterten Funktionen suchen oder spezielle Anforderungen haben, die der WordPress Block Editor oder SeedProd nicht erfüllen können, ist ein WordPress-Plugin, das auf Video-Einbettungen spezialisiert ist, möglicherweise die beste Lösung.

Dafür empfehlen wir das Plugin YouTube Feed Pro von Smash Balloon, das beste YouTube-Video-Galerie-Plugin für WordPress. Es ermöglicht Ihnen, YouTube-Kanalvideos in einer anpassbaren Galerie einzubetten.

Das Plugin kann neue Videos automatisch importieren, Video-Feeds kombinieren, Live-Streaming-Funktionalität hinzufügen, eine YouTube-Playlist einbetten und mehr. YouTube-Einbettungen enthalten auch Like- und Share-Buttons, Kommentare und Reaktionen, um Social Proof direkt im Video-Widget zu erhöhen.

Um mehr zu erfahren, können Sie diese Anleitung zum Einbetten von YouTube-Videos in WordPress ansehen.

Methode 4: Einbetten mit iFrame-Code (für nicht-whitelist-Seiten)

Die drei oben genannten Methoden decken 90 % der Fälle ab. Wenn Sie von einer Website einbetten müssen, die WordPress nicht automatisch erkennt, oder wenn Sie die Vorschläge für verwandte Videos von YouTube steuern möchten, benötigen Sie stattdessen den iFrame-Code.

So geht's:

1. Gehen Sie zu dem Video auf YouTube, klicken Sie auf Teilen, dann auf Einbetten und kopieren Sie den iFrame-Code.
2. Fügen Sie im WordPress Block-Editor einen Benutzerdefinierten HTML-Block hinzu.
3. Fügen Sie den iFrame-Code in den Block ein.
4. Speichern und veröffentlichen Sie Ihre Seite.

Verwenden Sie diese Methode, wenn die Plattform nicht auf der oEmbed-Whitelist von WordPress steht oder wenn Sie benutzerdefinierte Parameter benötigen. Zum Beispiel reduziert das Hinzufügen von rel=0 zur YouTube-URL die Vorschläge für verwandte Videos am Ende.

Eine Sache, die man wissen sollte: Manuelle iFrames sind auf Mobilgeräten nicht automatisch responsiv. Um das zu beheben, umschließen Sie den iFrame mit einem CSS-Container. Fügen Sie dies in das benutzerdefinierte CSS Ihres Themes oder in einen HTML-Block oberhalb des Embeds ein:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Umschließen Sie dann Ihren iFrame wie folgt: <div class="video-container">[iFrame-Code hier]</div>. Der Padding-Bottom-Wert von 56,25 % ergibt ein Seitenverhältnis von 16:9 bei jeder Bildschirmgröße.

Um ein MP4-Video hinzuzufügen, das Sie selbst hosten, verwenden Sie den Video-Block des Block-Editors (nicht den YouTube-Block), klicken Sie auf „Hochladen“, wählen Sie Ihre MP4-Datei aus, und WordPress fügt einen nativen HTML5-Videoplayer ein. Stellen Sie Autoplay aus und fügen Sie ein Vorschaubild für die beste Leistung hinzu.

So verhindern Sie, dass Videos Ihre Seiten verlangsamen

Das Einbetten eines Videos von YouTube ist schnell, da das Video selbst auf deren Servern lebt. Aber der Player lädt immer noch Skripte auf Ihrer Seite, und das beeinträchtigt die Leistung. Hier ist, was ich auf jeder Videoseite mache, um die Dinge schnell zu halten.

• Lazy Loading: Der Videoplayer wird erst geladen, wenn ein Benutzer zu ihm scrollt. In SeedProd können Sie dies direkt in den Einstellungen des Video Pop Up-Blocks aktivieren. Im Block-Editor lädt WordPress Videos seit Version 5.5 standardmäßig verzögert.
• Benutzerdefinierte Miniaturansicht (Bild-Overlay): Anstatt den vollständigen Player beim Laden der Seite zu laden, zeigen Sie ein leichtgewichtiges Bild an. Der Player wird erst initialisiert, wenn der Besucher auf „Play“ klickt. Die Video-Overlay-Option von SeedProd macht genau das. Für ein typisches YouTube-Embed reduziert dies das anfängliche Seitengewicht erheblich.
• Direkte Uploads vermeiden: Wie bereits erwähnt, werden Videos, die auf WordPress hochgeladen werden, von Ihrem eigenen Server ausgeliefert. Wenn Sie Videos selbst hosten, verwenden Sie ein CDN, um sie von Servern auszuliefern, die näher an Ihren Besuchern sind.
• Responsives Video: Automatisch eingebettete Videos aus dem Block-Editor sind standardmäßig responsiv. Manuelle iFrames benötigen die CSS-Hülle, die in Methode 4 oben beschrieben ist.

Der größte Gewinn kommt von der benutzerdefinierten Miniaturansicht. Ich habe gesehen, wie Seiten ihre Renderzeit fast halbiert haben, nur indem sie ein Standard-YouTube-Embed durch ein Overlay-Bild ersetzt haben. Es ist eine Fünf-Minuten-Änderung mit einem echten Geschwindigkeitsunterschied.

Machen Sie Ihre Videos zugänglich

Zwei weitere Dinge, die es wert sind, bevor Sie damit fertig sind.

• Untertitel: Aktivieren Sie Untertitel auf YouTube oder laden Sie eine SRT-Datei direkt auf die Plattform hoch. Für Vimeo ist die gleiche Option in den Videoeinstellungen verfügbar. Untertitel helfen Benutzern mit Hörbehinderungen und verbessern die Wiedergabezeit für Zuschauer in lauten Umgebungen.
• Transkripte: Fügen Sie unter dem Video ein Texttranskript ein. Es ist ein wichtiges SEO-Signal und macht den Inhalt für Benutzer zugänglich, die Audio überhaupt nicht hören können.
• Kein unerwartetes Autoplay: Die Lazy-Loading-Einstellung von SeedProd bedeutet, dass das Video erst abgespielt wird, wenn ein Besucher es auswählt. Das ist ein Gewinn für die Barrierefreiheit. Unerwartete Töne sind für Screenreader-Benutzer desorientierend.

FAQs zum Einbetten von Videos in WordPress

Wie bette ich ein Video in WordPress ohne YouTube ein?

Verwenden Sie die Option „Benutzerdefinierte Videoquelle“ von SeedProd oder den Block „Benutzerdefinierter HTML-Code“ des Block-Editors. Wählen Sie in SeedProd den Block „Video“ oder „Video-Popup“, wählen Sie „Benutzerdefiniert“ als Quelle und fügen Sie den Einbettungscode Ihres Videos ein. Fügen Sie im Block-Editor einen Block „Benutzerdefinierter HTML-Code“ hinzu und fügen Sie den iFrame oder den Einbettungscode Ihrer Videoplattform ein. Dies funktioniert für Vimeo, selbst gehostete Videos und jede Plattform, die einen Einbettungscode bereitstellt.

Wie füge ich ein MP4-Video zu WordPress hinzu?

Verwenden Sie den Block „Video“ des Block-Editors (nicht den YouTube-Block), um eine MP4-Datei direkt hochzuladen. Klicken Sie auf den Block, wählen Sie „Hochladen“ und wählen Sie Ihre MP4-Datei aus. WordPress fügt einen nativen HTML5-Videoplayer ein. Für die beste Leistung stellen Sie Autoplay auf „Aus“ und fügen Sie ein Posterbild hinzu, damit Besucher vor dem Laden des Videos ein statisches Vorschaubild sehen.

Warum kann ich kein YouTube-Video in WordPress einbetten?

WordPress muss so eingestellt sein, dass Einbettungen zugelassen werden. Gehen Sie zu Einstellungen » Medien und stellen Sie sicher, dass „Versuchen, alle reinen Text-URLs automatisch einzubetten“ aktiviert ist. Wenn das Einbetten immer noch fehlschlägt, hat der Videoinhaber möglicherweise das Einbetten auf seiner Seite deaktiviert.

Verwenden Sie die Standard-Video-URL aus der Adressleiste, nicht einen Freigabe-Link oder eine gekürzte URL. Diese brechen manchmal die automatische Erkennung von Einbettungen.

Wie optimiere ich die Ladegeschwindigkeit von Videos in WordPress?

Aktivieren Sie Lazy Loading, damit der Videoplayer erst geladen wird, wenn ein Besucher zu ihm scrollt. Verwenden Sie ein benutzerdefiniertes Miniaturbild (Bildüberlagerung) anstelle des Standardplayers. Der vollständige Player wird erst nach einem Klick initialisiert, was das anfängliche Seitengewicht erheblich reduziert.

Vermeiden Sie es, Videos direkt in WordPress hochzuladen. Wenn Sie selbst hosten, verwenden Sie ein CDN, um die Datei von Servern bereitzustellen, die näher an Ihren Besuchern sind.

Kann ich Videos in WordPress automatisch abspielen lassen?

Ja, aber Browser wie Chrome und Safari blockieren oft Autoplay, es sei denn, das Video ist stummgeschaltet. Um Browseranforderungen und Barrierefreiheitsstandards zu erfüllen, sollten Autoplay-Videos ohne Ton starten und sichtbare Wiedergabesteuerungen enthalten.

Viele Page Builder und Videoplugins, einschließlich SeedProd, ermöglichen es Ihnen, Autoplay- und Stummschaltungseinstellungen direkt im Einstellungsbereich des Blocks umzuschalten.

Weitere hilfreiche WordPress-Anleitungen

Sie haben ein eingebettetes Video, es spielt schnell ab und es wird Ihre Seitengeschwindigkeitsbewertung nicht beeinträchtigen. Jetzt sind Sie in einer besseren Position als die meisten WordPress-Sites, die einfach eine URL einfügen und auf das Beste hoffen.

Wenn Sie die meiste Kontrolle über die Platzierung von Videos auf Landing Pages, Seitenleisten und Theme-Vorlagen wünschen, Holen Sie sich SeedProd und Sie können es an einem Nachmittag eingerichtet haben.

Wenn Sie nach weiteren Möglichkeiten suchen, Ihre WordPress-Website zu verbessern, finden Sie möglicherweise die folgenden Anleitungen hilfreich:

• So betten Sie Facebook-Videos in WordPress ein
• So fügen Sie benutzerdefinierte WordPress-Social-Media-Icons zu Ihrer Website hinzu
• So sichern Sie Ihre WordPress-Website
• So erhalten Sie WordPress-Support (für Anfänger)

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.