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

How to Add YouTube Video as Fullscreen Background in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add a YouTube video as a fullscreen background in WordPress? 

When used properly, background videos can instantly grab a visitor’s attention and keep them on your website. This makes videos a great choice for landing pages and sales pages.

In this article, we will show you how to add a YouTube video as a fullscreen background on your WordPress website.

How to add YouTube video as fullscreen background in WordPress

Why Use a YouTube Video as a Fullscreen Background?

An engaging and eye-catching video background on your header is a great way to get visitors to stay on your site. When visitors first land on your WordPress site, you only have a few seconds to grab their attention.

These days, many different WordPress themes support video backgrounds. However, uploading and hosting video content on WordPress can take a lot of bandwidth.

Depending on your WordPress hosting plan, you might even have to buy extra storage.

At WPBeginner, we highly recommend not uploading your videos to WordPress.

Instead, you can use a service like YouTube and then embed the video as a background for your WordPress website. In this way, you can stand out from your competitors without slowing down your website and affecting your user experience.

That said, let’s see how you can add a YouTube video as a fullscreen background on your WordPress website. We will show you two methods, and you can use these quick links to navigate between them:

Method 1: Use Advanced WordPress Backgrounds for Fullscreen Video Background (Free)

If you are looking for a free and easy way to add video backgrounds, then you can use Advanced WordPress Backgrounds.

This free plugin adds a Background block that allows you to create a fullscreen background using any color, image, or video, including YouTube videos.

First, you will need to install and activate the plugin in your WordPress dashboard. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, simply head to the page or post where you want to add a YouTube video as a fullscreen background. In the Gutenberg block editor, go ahead and click on the ‘+’ add block button.

In the popup that appears, start typing in ‘Background AWB’. When the right block appears, give it a click to add it to the page.

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

In the left-hand menu, you will see three tabs for the different kinds of full-width backgrounds you can create: Color, Image, and Video.

Since you want to add a YouTube video, click on the ‘Video’ tab. After that, choose the ‘YouTube / Vimeo‘ tab. 

You can now copy and paste the URL of the YouTube video file that you want to use on your WordPress blog.

Getting the URL for a YouTube video

Now, the WordPress block editor will show a preview of how this background will look.

Advanced WordPress Backgrounds changes the size of the video based on the content you add on top of it, so don’t worry if the video currently looks a bit small.

How to customize a YouTube background video in WordPress

By default, the video background is disabled on mobile devices.

However, if you do want to show the video background on mobile devices, then click to activate the ‘Enable on mobile devices’ toggle.

Showing a YouTube background on mobile devices

Out of the box, the block will play the entire YouTube video on autoplay and on a loop. 

Another option is to play a specific portion of the video by typing the exact times into the ‘Start Time’ and ‘End Time’ boxes. 

You can also stop the video from playing on a loop by disabling the ‘Loop’ toggle.

How to add a YouTube background video to a website

By default, the video will only play when the visitor can see it in their browser. This will help maintain your website performance, so you will typically want to leave the ‘Always play’ toggle disabled.

When you first add the video, it is shown at 100% opacity, so it looks solid. Feel free to drag the ‘Image Opacity’ slider to make the YouTube video background more subtle.  

Changing the opacity settings for a YouTube video

If you experiment with opacity, then you may also want to try adding a colored overlay. 

Simply click to expand the ‘Overlay Color’ section and then use the settings to create different colored overlays.

Adding an overlay to a video background

Feel free to explore other settings, like the parallax effect and spacing, to make the background look exactly like you want it.

When you are happy with how the YouTube video background is set up, it’s time to start adding content like links, texts, and images. 

To start, click on the ‘+’ icon in the middle of the Background (AWB) block.

Adding blocks to a YouTube background video

This opens a popup where you can choose the block you want to add. The Advanced WordPress Backgrounds plugin works with all the standard WordPress blocks, so you can add any content you want.

If you add text on top of the block, just make sure to change the text color so that it complements well with the video background.

When you are happy with how it looks, just click the ‘Update’ or ‘Publish’ button to make the page live. Now, if you visit your WordPress website, then you will see the video background in action. 

An example of a YouTube video background in WordPress

If you are looking to fully customize your fullscreen background video or even easily design all the pages on your website, then this method is for you.

The best way to add a YouTube video as a fullscreen background is with Thrive Architect.

Thrive Architect is an easy-to-use page builder plugin made for beginners in mind. Besides a video background feature, it has a drag-and-drop functionality that is flexible to use, so you can create the website you want without any hassle.

Additionally, it comes with smart landing page templates that are optimized for conversions, so your landing page is set up for success from the get-go.

For more information about Thrive Architect, you can read our Thrive Architect review.

Thrive Architect

If you want to use this method, go ahead and purchase a Thrive Architect plan first. It’s available for purchase as a standalone product or as part of the Thrive Themes bundle.

Then, simply install the plugin. You can check out our guide on how to install a WordPress plugin for more information.

After that, you can go to ‘Pages’ from the WordPress admin area and select a page to edit. Hover over the page and choose ‘Edit with Thrive Architect.’

Clicking Edit with Thrive Architect on a page

Next, click the ‘+’ button on the right side of the page and find the Background Section element.

Just click on it to add it to the page.

Adding a Background section in Thrive Architect

At this point, you can navigate to the left side of the page and scroll down to the Background Style section.

Here, just activate the ‘Video background’ toggle and select ‘YouTube’ for the Source.

Selecting a video background style in Thrive Architect

After that, go to the YouTube video that you want to use as a fullscreen background.

Just copy the YouTube video URL like so:

Getting the URL for a YouTube video

Then, paste the URL in the appropriate section.

You should now see the background on the screen.

Pasting video background URL in Thrive Architect

While the background is added, it’s not fullscreen just yet.

To make sure it is fullscreen, you need to scroll up to the Main Options section. Then, enable the ‘Content covers entire screen width’, ‘Match height to screen’, and ‘Stretch to fit screen width options’.

Adjusting the video background height and width in Thrive Architect

Let’s explore some more options. To add some content to your background, all you need to do is click the ‘+’ button on the right side again and drag and drop an element.

You can add texts, images, forms, buttons, testimonials, and more. Thrive Architect has dozens of conversion-focused elements that you can leverage for your website.

If you think the background color doesn’t contrast well enough with the text, simply go back to the Background Section settings.

Then, scroll down to Background Style again, and in the Add Layer option, choose a solid color. After that, you can choose a color to use as a background filter and adjust the opacity as you like.

Once you are done, just click ‘Apply.’

Changing the color overlay opacity in Thrive Architect

Another thing you can adjust in the Background Section settings is the Scroll Behavior. You can choose whether to make it static, sticky, or parallax.

We recommend just keeping it static so that the background doesn’t move as the user scrolls down. Otherwise, the video will keep on playing, which can slow down your website.

Adjusting the scroll behavior of the video background in Thrive Architect

The next thing you can do is go to the Responsive section. Here, you can choose whether to make the video background appear on the mobile and tablet versions of your website.

It’s up to you, but do bear in mind that videos take a while to load. It can get annoying for your visitors to wait for them to run when they are on a small-screen device.

Adjusting the responsiveness behavior of the video background in Thrive Architect

Once you are satisfied with the fullscreen YouTube video background, simply click the ‘Save Work’ button to save your changes.

That’s it!

Now, go to your WordPress website to see how it looks live.

Here’s what our test web page looks like.

Video background example made with Thrive Architect

Alternative: Add an Animated Background in WordPress

While video backgrounds can be visually appealing, they can also slow down your website’s loading speed. If you want an alternative option, then you can add an animated background instead.

The best way to do this is with SeedProd, a powerful drag-and-drop page builder plugin for WordPress.

It allows you to easily add stunning animated backgrounds to your website using particle.js. Particle.js is a lightweight JavaScript library that creates interactive particle animations.

The particle background's advanced settings in SeedProd

For more information, you can check out our guide on how to add an animated background in WordPress.

Bonus Tip: Add a YouTube Video Feed in WordPress 

Do you want to add more videos to your website? While WordPress has built-in video embed blocks, they are not the most visually appealing way to display videos, especially if you have multiple of them.

That’s where Smash Balloon YouTube Feed Pro comes in. 

Smash Balloon YouTube Feed Pro is the best YouTube gallery plugin on the market. It automatically shows all the latest videos from your YouTube channel, so your visitors will always see the newest content.

Embedding a YouTube playlist using Smash Balloon

Simply create a YouTube feed using Smash Balloon’s easy editor, and then add it to any page or post using either shortcode or the plugin’s ready-made block.

You can also use Smash Balloon to embed YouTube playlists, favorites, and live streams on your WordPress website.

Creating a YouTube feed using the Smash Balloon social media plugin

The best thing about Smash Balloon is that it doesn’t slow down your site. The plugin’s built-in YouTube caching feature will make sure your site always loads fast, which is great for SEO.

For more details, you can see our step-by-step guide on how to show the latest videos from a YouTube channel in WordPress.

We hope this tutorial helped you learn how to add a YouTube video as a background in WordPress. You may also want to check out our guide on how to create a viral waitlist landing page with WordPress and our expert picks for the best WordPress theme builders.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

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.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

14 CommentsLeave a Reply

  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.

    • WPBeginner Support says

      The videos should load as an embed from YouTube which shouldn’t cause a slowdown on your site.

      Admin

    • 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

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.