Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

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.

How to add YouTube video as fullscreen background in WordPress

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.

How to add a fullscreen video to a WordPress blog post or page

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.

Getting the URL for a YouTube video

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.

How to customize a YouTube background video in WordPress

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“.

Showing a YouTube background on mobile devices

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.

How to add a YouTube background video to a website

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.

Changing the opacity settings for a YouTube video

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.

Adding an overlay to a video background

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).

Adding blocks to a YouTube background video

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.

An example of a YouTube video background in WordPress

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.

Thrive Architect

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“.

Clicking Edit with Thrive Architect on a page

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.

Adding a Background section in Thrive Architect

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.

Selecting a video background style in Thrive Architect

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

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

Getting the URL for a YouTube video

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

Sie sollten nun den Hintergrund auf dem Bildschirm sehen.

Pasting video background URL in Thrive Architect

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“.

Adjusting the video background height and width in Thrive Architect

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“.

Changing the color overlay opacity in Thrive Architect

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.

Adjusting the scroll behavior of the video background in Thrive Architect

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.

Adjusting the responsiveness behavior of the video background in Thrive Architect

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.

Video background example made with Thrive Architect

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.

The particle background's advanced settings in SeedProd

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.

Embedding a YouTube playlist using Smash Balloon

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.

Creating a YouTube feed using the Smash Balloon social media plugin

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

14 KommentareEine Antwort hinterlassen

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Moinuddin Waheed says

    This is very simple yet powerful idea to grab the visitors attention by playing something in the background.
    I have used it with page builders and never knew that simple method directly from Gutenberg is also available to use.
    it is specially helpful for landing and sales pages which makes intuitive on visitors part to engage with call to action button.
    Thank for illustrating the simple steps.

  3. THANKGOD JONATHAN says

    I have an uploaded video on my WordPress library and I have been thinking of making it like a background video on my blog.
    Please how do I do it properler so that it does not affect my website speed? Or must I upload it on youtube and then embed it on my site?

  4. Ralph says

    I want to use it as a background for my portfolio/business contact page, but does it slow down the website itself, or does it load it straight from YouTube and doesn’t slow down the website itself?

    Previous comments are old but still concerning.

    • Jiří Vaněk says

      I shouldn’t worry about the slowdown of the website itself. The issue here lies mainly in slow connectivity and data on these devices. The first problem arises with mobiles that don’t have strong connectivity. It will lag, appear unprofessional, and perhaps lead the user to leave. The second issue is that if someone has a limited data plan, they’ll complain about how much data such a page consumes. Personally, I’d probably avoid this.

  5. Jiří Vaněk says

    I can learn something new again with Gutenberg. I’ve always known how to do this only in Elementor, where adding a video background is really simple. Now I know how to do it outside of Elementor as well.

  6. T_Lind says

    Great article!

    But I cannot add the video background to a single page, like you describe. I’m only able to add a youtube video to my homepage, which limits the extend to which the app can be used.

    Ideas?

  7. Tobi says

    Hi, this plugin was a disaster to my website.

    It consumed all the resources and for hours I was on the phone with my hosting company trying to battle why I was getting the errors on this screenshots below:

    After hours, we finally traced them to the plugin i recently installed.

    We had to remove it from the file manager and everything is back to normal now.

    It takes up a lot of resources unless you have a super hosting account, i don’t advise.

    • WPBeginner Support says

      Hi Tobi,

      The plugin shouldn’t consume too many resources because it loads video from YouTube not from your website. The first screenshot you shared points to a database connection error. We hope everything works fine for you now, however, if you still see issues on your website then it is most likely a hosting issue.

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.