So fügen Sie ein YouTube-Video als Vollbildhintergrund in WordPress ein

Vollbild-Videohintergründe erregen sofort Aufmerksamkeit. Sie verwandeln eine einfache WordPress-Website in etwas, das poliert, modern und professionell gestaltet wirkt.

Insgesamt haben wir gesehen, wie sehr ein gut platzierter Videohintergrund den ersten Eindruck verbessern und Besucher binden kann.

Die gute Nachricht ist, dass Sie keine spezielle Software oder benutzerdefinierte Entwicklung benötigen. Sie können sogar YouTube-Videos verwenden, die Sie bereits haben, was eine kostengünstige Möglichkeit ist, Ihren Seiten Bewegung und Persönlichkeit zu verleihen.

In diesem Leitfaden führen wir Sie durch die einfachsten Möglichkeiten, ein YouTube-Video als WordPress-Hintergrund mit anfängerfreundlichen Tools hinzuzufügen.

Warum ein YouTube-Video als Vollbild-Hintergrund verwenden?

Die Verwendung eines YouTube-Videos als Vollbildhintergrund ist eine wirkungsvolle Methode, um die Aufmerksamkeit der Besucher sofort zu fesseln und sie auf Ihrer Website zu halten.

Hier sind die Vorteile:

• Schnelle Ladezeiten beibehalten: Das Einbetten eines YouTube-Videos anstelle des Hochladens Ihres eigenen Videos hält Ihre Website schlank, was für die Benutzererfahrung und SEO wichtig ist.
• Besucher sofort fesseln: Ein bewegter Videohintergrund kann die Aufmerksamkeit innerhalb der ersten Sekunden eines Besuchs auf sich ziehen.
• Sich von der Konkurrenz abheben: Es schafft ein visuell ansprechendes und modernes Erscheinungsbild, das Ihre Website von anderen abhebt.
• Bandbreite und Speicherplatz sparen: Das Hosten von Videos auf WordPress kann viele Serverressourcen verbrauchen und zusätzlichen Speicherplatz erfordern.

Bei WPBeginner empfehlen wir dringend, Videos von YouTube einzubetten, anstatt sie direkt in WordPress hochzuladen. Dieser Ansatz ermöglicht es Ihnen, ansprechende Inhalte zu präsentieren, ohne Ihre Website zu verlangsamen oder Ihren Hosting-Plan unnötig zu belasten.

Nun, lassen Sie uns sehen, wie Sie ein YouTube-Video als Vollbildhintergrund auf Ihrer WordPress-Website hinzufügen können. Wir zeigen Ihnen zwei Methoden, und Sie können diese Schnelllinks verwenden, um zwischen ihnen zu navigieren:

• Methode 1: Verwenden Sie Advanced WordPress Backgrounds für Vollbild-Video-Hintergründe (kostenlos)
• Methode 2: Verwenden Sie Thrive Architect, um einen Vollbild-Video-Hintergrund hinzuzufügen (empfohlen)
• Alternative: Animierten Hintergrund in WordPress mit SeedProd hinzufügen
• Häufig gestellte Fragen zu Videohintergründen

Methode 1: Verwenden Sie Advanced WordPress Backgrounds für einen Vollbild-Video-Hintergrund (kostenlos)

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

Dieses kostenlose Plugin fügt einen Hintergrundblock hinzu, mit dem Sie einen Vollbildhintergrund mit jeder Farbe, jedem Bild oder Video, einschließlich YouTube-Videos, erstellen können.

Zuerst müssen Sie das Plugin in Ihrem WordPress-Dashboard installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung einfach zu der Seite oder dem Beitrag, auf dem Sie ein YouTube-Video als Vollbildhintergrund hinzufügen möchten. Klicken Sie im Gutenberg-Blockeditor auf die Schaltfläche „+“ zum Hinzufügen von Blöcken.

Geben Sie im erscheinenden Popup „Background AWB“ ein. Wenn der richtige Block erscheint, klicken Sie darauf, um ihn zur 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 anschließend die Registerkarte „YouTube / Vimeo“. 

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

Nun zeigt der WordPress-Blockeditor eine Vorschau darauf, wie dieser Hintergrund aussehen wird.

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

Standardmäßig ist der Videohintergrund auf Mobilgeräten deaktiviert.

Wenn Sie das Video-Hintergrundbild jedoch auf Mobilgeräten anzeigen möchten, klicken Sie, um den Schalter „Auf Mobilgeräten aktivieren“ zu aktivieren.

Beachten Sie einfach, dass Videohintergründe bei mobilen Nutzern den Akku belasten und Daten verbrauchen können.

Standardmäßig spielt der Block das gesamte YouTube-Video automatisch und in einer Schleife ab. 

Eine weitere Option ist, einen bestimmten Teil des Videos abzuspielen, indem Sie die genauen Zeiten (in Sekunden) in die Felder „Startzeit“ und „Endzeit“ eingeben.

Sie können auch verhindern, dass das Video in einer Schleife abgespielt wird, indem Sie die Umschaltfläche „Schleife“ deaktivieren.

Standardmäßig wird das Video nur abgespielt, wenn der Besucher es in seinem Browser sehen kann. Dies hilft, die Leistung Ihrer Website aufrechtzuerhalten, daher möchten Sie die Umschaltfläche „Immer abspielen“ normalerweise deaktiviert lassen.

Wenn Sie das Video zum ersten Mal hinzufügen, wird es mit 100 % Deckkraft angezeigt, sodass es vollständig sichtbar ist. Ziehen Sie den Schieberegler für die „Bilddeckkraft“ nach Belieben, um den YouTube-Video-Hintergrund subtiler zu gestalten.  

Wenn Sie mit der Deckkraft experimentieren, möchten Sie vielleicht auch versuchen, eine farbige Überlagerung hinzuzufügen. 

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

Sie können gerne weitere Einstellungen erkunden, wie z. B. den Parallax-Effekt und Abstände, um den Hintergrund genau so aussehen zu lassen, wie Sie es möchten.

Wenn Sie mit der Einrichtung des YouTube-Video-Hintergrunds zufrieden sind, ist es an der Zeit, Inhalte wie Links, Texte und Bilder hinzuzufügen. 

Klicken Sie zunächst auf das „+“-Symbol in der Mitte des Hintergrundblocks (AWB).

Dies öffnet ein Popup, in dem Sie den hinzuzufügenden Block auswählen können. Das Plugin Advanced WordPress Backgrounds funktioniert mit allen Standard-WordPress-Blöcken, sodass Sie beliebige Inhalte hinzufügen können.

Wenn Sie Text über dem Block hinzufügen, stellen Sie einfach sicher, dass Sie die Textfarbe ändern, damit sie gut zum Video-Hintergrund passt.

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

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

Wenn Sie Ihren Video-Hintergrund vollständig anpassen oder ganze Seiten einfach gestalten möchten, ist diese Methode genau das Richtige für Sie.

Dazu benötigen Sie Thrive Architect.

Nach gründlichen Tests haben wir festgestellt, dass es sich um ein super benutzerfreundliches Pager-Builder-Plugin handelt. Neben einer Video-Hintergrundfunktion verfügt es über eine Drag-and-Drop-Funktionalität, die flexibel ist, sodass Sie Ihre gewünschte Website problemlos erstellen können.

Zusätzlich verfügt es über intelligente Landingpage-Vorlagen, die für Conversions optimiert sind, sodass Ihre Landingpage von Anfang an auf Erfolg ausgelegt ist.

Weitere Informationen zu Thrive Architect finden Sie in unserem Thrive Architect-Testbericht.

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

Installieren Sie dann einfach das Plugin. In unserem Leitfaden zur Installation eines WordPress-Plugins finden Sie weitere Informationen.

Danach können Sie im WordPress-Adminbereich zu „Seiten“ gehen und eine zu bearbeitende Seite auswählen. Fahren Sie mit der Maus über die Seite und wählen Sie „Mit Thrive Architect bearbeiten“ aus.

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

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

An dieser Stelle können Sie zur linken Seite der Seite navigieren und zum Abschnitt „Hintergrundstil“ nach unten scrollen.

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

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

Kopieren Sie einfach die YouTube-Video-URL wie folgt:

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

Sie sollten nun den Hintergrund auf dem Bildschirm sehen.

Während der Hintergrund hinzugefügt wurde, ist er noch nicht im Vollbildmodus.

Um sicherzustellen, dass es bildschirmfüllend ist, müssen Sie nach oben zum Abschnitt „Hauptoptionen“ scrollen. Aktivieren Sie dann die Optionen „Inhalt füllt die gesamte Bildschirmbreite“, „Höhe an Bildschirm anpassen“ und „Bildschirmbreite dehnen“.

Lassen Sie uns einige weitere Optionen erkunden. Um Ihrem Hintergrund Inhalte hinzuzufügen, klicken Sie einfach erneut auf die Schaltfläche '+' auf der rechten Seite und ziehen Sie ein Element per Drag & Drop.

Sie können Texte, Bilder, Formulare, Schaltflächen, 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 zurück zu den Einstellungen im Abschnitt "Hintergrund".

Scrollen Sie dann erneut nach unten zu „Hintergrundstil“ und wählen Sie unter „Ebene hinzufügen“ eine Volltonfarbe aus. Danach können Sie eine Farbe als Hintergrundfilter auswählen und die Deckkraft nach Belieben anpassen.

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

Eine weitere Einstellung, die Sie im Abschnitt Hintergrund anpassen können, ist das Scroll-Verhalten. Sie können wählen, ob es statisch, fixiert oder Parallax sein soll.

Wir empfehlen, es einfach statisch zu belassen, damit sich der Hintergrund beim Scrollen des Benutzers nicht bewegt. Andernfalls wird das Video weiter abgespielt, was Ihre Website verlangsamen kann.

Als Nächstes können Sie zum Abschnitt "Responsive" gehen. Hier können Sie auswählen, ob der Video-Hintergrund auf den mobilen und Tablet-Versionen Ihrer Website angezeigt werden soll.

Es liegt an Ihnen, aber bedenken Sie, dass Videos eine Weile zum Laden brauchen. Es kann für Ihre Besucher ärgerlich sein, darauf zu warten, dass sie abgespielt werden, wenn sie sich auf einem Gerät mit kleinem Bildschirm befinden.

Sobald Sie mit dem Vollbild-YouTube-Video-Hintergrund zufrieden sind, klicken Sie einfach auf die Schaltfläche „Arbeit speichern“, um Ihre Änderungen zu speichern.

Das war's!

Gehen Sie nun zu Ihrer WordPress-Website, um zu sehen, wie sie live aussieht.

So sieht unsere Testwebseite aus.

Alternative: Animierten Hintergrund in WordPress mit SeedProd hinzufügen

Während Video-Hintergründe visuell ansprechend sein können, können sie auch die Ladezeit Ihrer Website verlangsamen. Wenn Sie eine Alternative wünschen, können Sie stattdessen einen animierten Hintergrund hinzufügen.

Der beste Weg, dies zu tun, ist mit SeedProd, einem leistungsstarken Drag-and-Drop-Page-Builder-Plugin für WordPress.

Es ermöglicht Ihnen, mit particle.js ganz einfach beeindruckende animierte Hintergründe für Ihre Website hinzuzufügen. Particle.js ist eine leichtgewichtige JavaScript-Bibliothek, die interaktive Partikelanimationen erstellt.

Weitere Informationen finden Sie in unserem Leitfaden zum Hinzufügen eines animierten Hintergrunds in WordPress.

Bonustipp: Fügen Sie einen YouTube-Video-Feed in WordPress hinzu 

Möchten Sie weitere Videos zu Ihrer Website hinzufügen? Obwohl WordPress integrierte Video-Embed-Blöcke hat, sind diese nicht die optisch ansprechendste Art, Videos anzuzeigen, insbesondere wenn Sie mehrere davon haben.

Hier kommt Smash Balloon YouTube Feed Pro ins Spiel. 

Unserer Meinung nach ist es das beste YouTube-Galerie-Plugin auf dem Markt, das automatisch alle neuesten Videos aus Ihrem YouTube-Kanal anzeigt, sodass 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 mit einem Shortcode oder dem fertigen Block des Plugins zu jeder Seite oder jedem Beitrag hinzu.

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

Das Beste an Smash Balloon ist, dass es Ihre Website nicht verlangsamt. Die integrierte YouTube-Caching-Funktion des Plugins sorgt dafür, dass Ihre Website immer schnell geladen wird, was großartig für SEO ist.

Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Anzeigen der neuesten Videos von einem YouTube-Kanal in WordPress.

Häufig gestellte Fragen zu Videohintergründen

Hier sind einige häufig gestellte Fragen unserer Leser zum Hinzufügen von Video-Hintergründen in WordPress:

Wie schalte ich ein YouTube-Video in den Vollbildmodus?

Um ein YouTube-Video in den Vollbildmodus zu schalten, klicken Sie auf das Vollbildsymbol unten rechts im YouTube-Player oder verwenden Sie die Tastenkombination f, während das Video aktiv ist.

Wie fügt man einen Video-Hintergrund in WordPress hinzu?

Sie können einen Video-Hintergrund über ein Plugin oder einen Page Builder wie Thrive Architect hinzufügen. Bei YouTube-Videos wird das Einbetten empfohlen, um eine Verlangsamung Ihrer Website zu vermeiden.

Welche Art von YouTube-Videos sollte ich als Hintergrund wählen?

Wir empfehlen, ein visuell ansprechendes Video zu wählen, das dezent genug ist, um nicht vom Hauptinhalt abzulenken. Kurze, sich wiederholende Clips mit sanfter Bewegung funktionieren oft am besten.

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie ein YouTube-Video als Hintergrund in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Erstellen einer viralen Wartelisten-Landingpage mit WordPress und unsere Expertenauswahl für die besten WordPress-Theme-Builder lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.