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

Möchten Sie ein YouTube-Video als Vollbild-Hintergrund in WordPress einfügen?

Wenn sie richtig eingesetzt werden, können Hintergrundvideos die Aufmerksamkeit der Besucher sofort erregen und sie auf Ihrer Website halten. Das macht Videos zu einer guten Wahl für Landing Pages und Verkaufsseiten.

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 ansprechender und auffälliger Videohintergrund ist eine gute Möglichkeit, Besucher auf Ihrer Website zu halten. Wenn Besucher zum ersten Mal auf Ihrer WordPress-Website landen, haben Sie nur ein paar Sekunden Zeit, um ihre Aufmerksamkeit zu erregen und sie zum Bleiben zu bewegen.

Heutzutage unterstützen viele verschiedene WordPress-Themes Videohintergründe. Das Hochladen und Hosten eines Videos 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.

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, ein YouTube-Video als Vollbild-Hintergrund 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 installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Rufen Sie nach der Aktivierung einfach die Seite oder den Beitrag auf, zu dem Sie ein YouTube-Video als Vollbildhintergrund hinzufügen möchten. Sie können dann auf die Schaltfläche „+“ klicken, um einen Block hinzuzufügen.

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 Registerkarten für die verschiedenen Arten von Vollbildhintergründen, 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 des YouTube-Videos, das 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“.

Standardmäßig spielt der Block das gesamte YouTube-Video 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 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, Schaltflächen, Testimonials und mehr hinzufügen. Thrive Architect bietet 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 als Hintergrundfilter wählen 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.

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 Anleitung, wie Sie die neuesten Videos eines YouTube-Kanals in WordPress anzeigen können.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie man ein YouTube-Video als Hintergrund in WordPress einfügt. Sehen Sie sich auch unsere Anleitung zum Erstellen einer Landing Page mit WordPress und unsere Expertenauswahl der besten YouTube-Video-Galerie-Plugins 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.