Hinzufügen eines YouTube-Videos als Vollbild-Hintergrund in WordPress

Manchmal versuchen wir, unsere WordPress-Websites mit neuen Methoden ansprechender zu gestalten, und eine davon ist das Hinzufügen eines YouTube-Videos als Vollbildhintergrund.

Richtig eingesetzt, können Hintergrundvideos das Engagement der Besucher und die Verweildauer auf einer Seite deutlich erhöhen. Wir finden auch, dass sie eine gute Möglichkeit sind, die Aufmerksamkeit der Besucher sofort zu erregen und einen unvergesslichen ersten Eindruck zu schaffen.

In diesem Artikel zeigen wir Ihnen, wie Sie ein YouTube-Video als Vollbild-Hintergrund auf Ihrer WordPress-Website einfügen können.

Warum ein YouTube-Video als Vollbild-Hintergrund verwenden?

Ein fesselnder und auffälliger Videohintergrund in Ihrem Header ist eine großartige Möglichkeit, um Besucher zum Verweilen auf Ihrer Website zu bewegen. Wenn Besucher zum ersten Mal auf Ihrer WordPress Website landen, haben Sie nur ein paar Sekunden Zeit, um ihre Aufmerksamkeit zu erregen.

Heutzutage unterstützen viele verschiedene Themes von WordPress Video-Hintergründe. Das Uploaden und Hosten von Video-Inhalten auf WordPress kann jedoch eine Menge Bandbreite beanspruchen.

Je nach Ihrem WordPress-Hostingplan müssen Sie möglicherweise sogar zusätzlichen Speicherplatz kaufen.

Wir von WPBeginner empfehlen dringend, Ihre Videos nicht in WordPress hochzuladen.

Stattdessen können Sie einen Dienst wie YouTube nutzen und das Video dann als Hintergrund für Ihre WordPress-Website einbetten. Auf diese Weise können Sie sich von Ihren Mitbewerbern abheben, ohne Ihre Website zu verlangsamen und die Benutzererfahrung zu beeinträchtigen.

Sehen wir uns also an, wie Sie ein YouTube-Video als Vollbild-Hintergrund auf Ihrer WordPress-Website einfügen können. Wir zeigen Ihnen zwei Methoden, zwischen denen Sie mit diesen Quicklinks navigieren können:

Methode 1: Erweiterte WordPress-Hintergründe für Vollbild-Videohintergrund verwenden (kostenlos)

Wenn Sie nach einer kostenlosen und einfachen Möglichkeit suchen, Video-Hintergründe hinzuzufügen, dann können Sie Advanced WordPress Backgrounds verwenden.

Dieses kostenlose Plugin fügt einen Hintergrundblock hinzu, mit dem Sie einen bildschirmfüllenden Hintergrund mit einer beliebigen Farbe, einem Bild oder einem Video, einschließlich YouTube-Videos, erstellen können.

Zunächst müssen Sie das Plugin in Ihrem WordPress-Dashboard installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress Plugins.

Nach der Aktivierung gehen Sie einfach zu der Seite oder dem Beitrag, zu dem Sie ein YouTube-Video als Vollbildhintergrund hinzufügen möchten. Klicken Sie im Gutenberg Block-Editor auf den Button „+“ zum Hinzufügen von Blöcken.

Geben Sie in dem daraufhin angezeigten Popup ‚Background AWB‘ ein. Wenn der richtige Block erscheint, klicken Sie darauf, um ihn der Seite hinzuzufügen.

Im linken Menü sehen Sie drei Tabs für die verschiedenen Arten von Hintergründen in voller Breite, die Sie erstellen können: Farbe, Bild und Video.

Da Sie ein YouTube-Video hinzufügen möchten, klicken Sie auf die Registerkarte „Video“. Wählen Sie dann die Registerkarte„YouTube / Vimeo„.

Sie können nun die URL der YouTube-Videodatei, die Sie in Ihrem WordPress-Blog verwenden möchten, kopieren und einfügen.

Der WordPress-Block-Editor zeigt nun eine Vorschau an, wie dieser Hintergrund aussehen wird.

Advanced WordPress Backgrounds ändert die Größe des Videos basierend auf dem Inhalt, den Sie darüber legen. Machen Sie sich also keine Sorgen, wenn das Video derzeit etwas klein aussieht.

Standardmäßig ist der Videohintergrund auf mobilen Geräten deaktiviert.

Wenn Sie jedoch den Videohintergrund auf mobilen Geräten anzeigen möchten, aktivieren Sie die Option „Auf mobilen Geräten aktivieren“.

Ohne Box spielt der Block das gesamte YouTube Video auf Autoplay und in einer Schleife ab.

Sie können auch einen bestimmten Teil des Videos abspielen, indem Sie die genauen Zeiten in die Felder „Startzeit“ und „Endzeit“ eingeben.

Sie können auch verhindern, dass das Video in einer Schleife abgespielt wird, indem Sie den Schalter „Schleife“ deaktivieren.

Standardmäßig wird das Video nur abgespielt, wenn der Besucher es in seinem Browser sehen kann. Dies trägt dazu bei, die Leistung Ihrer Website aufrechtzuerhalten, daher sollten Sie die Option „Immer abspielen“ in der Regel deaktiviert lassen.

Wenn Sie das Video zum ersten Mal hinzufügen, wird es mit einer Deckkraft von 100 % angezeigt, sodass es solide aussieht. Sie können den Schieberegler „Bilddeckkraft“ verschieben, um den Hintergrund des YouTube-Videos dezenter zu gestalten.

Wenn Sie mit der Deckkraft experimentieren, können Sie auch versuchen, eine farbige Überlagerung hinzuzufügen.

Klicken Sie einfach darauf, um den Abschnitt „Überlagerungsfarbe“ zu erweitern, und verwenden Sie dann die Einstellungen, um verschiedenfarbige Überlagerungen zu erstellen.

Sie können auch andere Einstellungen wie den Parallaxen-Effekt und die Abstände ausprobieren, um den Hintergrund genau nach Ihren Vorstellungen zu gestalten.

Wenn Sie mit der Einrichtung des YouTube-Videohintergrunds zufrieden sind, können Sie nun Inhalte wie Links, Texte und Bilder hinzufügen.

Um zu beginnen, klicken Sie auf das „+“-Symbol in der Mitte des Blocks Hintergrund (AWB).

Das Advanced WordPress Backgrounds Plugin funktioniert mit allen Standard-WordPress-Blöcken, so dass Sie jeden gewünschten Inhalt hinzufügen können.

Wenn Sie Text über dem Block hinzufügen, achten Sie darauf, die Textfarbe so zu ändern, dass sie sich gut mit dem Hintergrund des Videos ergänzt.

Wenn Sie mit dem Aussehen zufrieden sind, klicken Sie einfach auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um die Seite zu aktivieren. Wenn Sie nun Ihre WordPress-Website besuchen, werden Sie den Videohintergrund in Aktion sehen.

Methode 2: Verwenden Sie Thrive Architect, um einen Vollbild-Videohintergrund hinzuzufügen (empfohlen)

Wenn Sie Ihr Vollbild-Hintergrundvideo vollständig anpassen oder sogar alle Seiten Ihrer Website einfach gestalten möchten, dann ist diese Methode genau das Richtige für Sie.

Der beste Weg, ein YouTube-Video als Vollbild-Hintergrund hinzuzufügen, ist mit Thrive Architect.

Thrive Architect ist ein benutzerfreundliches Plugin für den Seitenaufbau, das speziell für Anfänger entwickelt wurde. Neben einer Videohintergrundfunktion verfügt es über eine Drag-and-Drop-Funktion, die flexibel einsetzbar ist, sodass Sie die gewünschte Website ohne Probleme erstellen können.

Darüber hinaus verfügt es über intelligente Landing Page-Vorlagen, die für Conversions optimiert sind, so dass Ihre Landing Page von Anfang an auf Erfolg eingestellt ist.

Weitere Informationen über Thrive Architect finden Sie in unserem Thrive Architect Test.

Wenn Sie diese Methode verwenden möchten, müssen Sie zuerst einen Thrive Architect-Plan kaufen. Er ist als eigenständiges Produkt oder als Teil des Thrive Themes-Pakets erhältlich.

Installieren Sie dann einfach das Plugin. Weitere Informationen finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Danach können Sie im WordPress-Verwaltungsbereich auf „Seiten“ gehen und eine Seite zum Bearbeiten auswählen. Bewegen Sie den Mauszeiger über die Seite und wählen Sie „Mit Thrive Architect bearbeiten“.

Klicken Sie als Nächstes auf die Schaltfläche „+“ auf der rechten Seite und suchen Sie das Element Hintergrundabschnitt.

Klicken Sie einfach darauf, um es der Seite hinzuzufügen.

An dieser Stelle können Sie zur linken Seite der Seite navigieren und nach unten zum Abschnitt Hintergrundstil blättern.

Aktivieren Sie hier einfach den Schalter „Videohintergrund“ und wählen Sie „YouTube“ als Quelle.

Gehen Sie dann zu dem YouTube-Video, das Sie als Vollbildhintergrund verwenden möchten.

Kopieren Sie einfach die URL des YouTube-Videos wie folgt:

Fügen Sie dann die URL in den entsprechenden Abschnitt ein.

Sie sollten nun den Hintergrund auf dem Bildschirm sehen.

Der Hintergrund wird zwar hinzugefügt, ist aber noch nicht bildschirmfüllend.

Um sicherzustellen, dass die Seite im Vollbildmodus angezeigt wird, müssen Sie zum Abschnitt „Hauptoptionen“ blättern. Aktivieren Sie dann die Optionen „Inhalt deckt gesamte Bildschirmbreite ab“, „Höhe an Bildschirm anpassen“ und „An Bildschirmbreite anpassen“.

Schauen wir uns einige weitere Optionen an. Um Ihrem Hintergrund einen Inhalt hinzuzufügen, brauchen Sie nur erneut auf die Schaltfläche „+“ auf der rechten Seite zu klicken und ein Element per Drag & Drop hinzuzufügen.

Sie können Texte, Bilder, Formulare, Buttons, Testimonials und mehr hinzufügen. Thrive Architect verfügt über Dutzende von konversionsorientierten Elementen, die Sie für Ihre Website nutzen können.

Wenn Sie der Meinung sind, dass die Hintergrundfarbe nicht gut genug mit dem Text kontrastiert, gehen Sie einfach zu den Einstellungen für den Hintergrundbereich zurück.

Scrollen Sie dann wieder nach unten zu Hintergrundstil und wählen Sie in der Option Ebene hinzufügen eine Volltonfarbe. Danach können Sie eine Farbe wählen, die Sie als Hintergrundfilter verwenden möchten, und die Deckkraft nach Belieben anpassen.

Sobald Sie fertig sind, klicken Sie einfach auf „Übernehmen“.

Ein weiterer Punkt, den Sie in den Einstellungen für den Hintergrundbereich anpassen können, ist das Scroll-Verhalten. Sie können wählen, ob es statisch, klebrig oder parallax sein soll.

Wir empfehlen, das Video statisch zu halten, damit sich der Hintergrund nicht bewegt, wenn der Benutzer nach unten scrollt. Andernfalls wird das Video immer wieder abgespielt, was Ihre Website verlangsamen kann.

Als Nächstes können Sie zum Abschnitt „Responsive“ gehen. Hier können Sie auswählen, ob der Videohintergrund auf der mobilen und der Tablet-Version Ihrer Website angezeigt werden soll.

Das bleibt Ihnen überlassen, aber bedenken Sie, dass Videos eine Weile zum Laden brauchen. Für Ihre Besucher kann es lästig sein, auf die Wiedergabe zu warten, wenn sie ein Gerät mit kleinem Bildschirm verwenden.

Wenn Sie mit dem YouTube-Videohintergrund im Vollbildmodus zufrieden sind, klicken Sie einfach auf die Schaltfläche „Arbeit speichern“, um Ihre Änderungen zu speichern.

Das war’s!

Rufen Sie nun Ihre WordPress-Website auf, um zu sehen, wie sie live aussieht.

So sieht unsere Test-Webseite aus.

Alternative: Hinzufügen eines animierten Hintergrunds in WordPress

Videohintergründe können zwar optisch ansprechend sein, verlangsamen aber auch die Ladegeschwindigkeit Ihrer Website. Wenn Sie eine alternative Option wünschen, können Sie stattdessen einen animierten Hintergrund hinzufügen.

Am besten geht das mit SeedProd, einem leistungsstarken Drag-and-drop Plugin für den Page-Builder in WordPress.

Mit particle.js können Sie auf einfache Weise atemberaubende animierte Hintergründe zu Ihrer Website hinzufügen. Particle.js ist eine leichtgewichtige JavaScript-Bibliothek, die interaktive Partikelanimationen erstellt.

Weitere Informationen finden Sie in unserer Anleitung, wie Sie einen animierten Hintergrund in WordPress hinzufügen.

Bonus-Tipp: Hinzufügen eines YouTube-Video-Feeds in WordPress

Möchten Sie mehr Videos auf Ihrer Website einfügen? WordPress verfügt zwar über eingebaute Videoeinbettungsblöcke, aber sie sind nicht die optisch ansprechendste Art, Videos anzuzeigen, vor allem, wenn Sie mehrere davon haben.

Das ist der Punkt, an dem Smash Balloon YouTube Feed Pro ins Spiel kommt.

Smash Balloon YouTube Feed Pro ist das beste YouTube-Galerie-Plugin auf dem Markt. Es zeigt automatisch alle neuesten Videos von Ihrem YouTube-Kanal, so dass Ihre Besucher immer die neuesten Inhalte sehen.

Erstellen Sie einfach einen YouTube-Feed mit dem einfachen Editor von Smash Balloon und fügen Sie ihn dann zu einer beliebigen Seite oder einem Beitrag hinzu, indem Sie entweder einen Shortcode oder den vorgefertigten Block des Plugins verwenden.

Sie können Smash Balloon auch verwenden, um YouTube-Wiedergabelisten, Favoriten und Live-Streams auf Ihrer WordPress-Website einzubetten.

Das Beste an Smash Balloon ist, dass es Ihre Website nicht ausbremst. Die in das Plugin integrierte YouTube-Caching-Funktion sorgt dafür, dass Ihre Website immer schnell geladen wird, was sich positiv auf die Suchmaschinenoptimierung auswirkt.

Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie die neuesten Videos eines YouTube-Kanals in WordPress anzeigen können.

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat zu lernen, wie man ein YouTube Video als Hintergrund in WordPress einfügt. Sehen Sie sich auch unseren Leitfaden zum Erstellen einer viralen Landing Page für Wartelisten mit WordPress und unsere Expertenauswahl für die besten Themes für WordPress an.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.