Do you need to add a YouTube video as a fullscreen background in WordPress?
When used correctly, background movies can immediately seize a customer’s consideration and hold them in your web site. This makes movies a fantastic alternative for touchdown pages and gross sales pages.
On this article, we’ll present you add a YouTube video as a fullscreen background in your WordPress web site.
![How to add YouTube video as fullscreen background in WordPress How to add YouTube video as fullscreen background in WordPress](https://www.wpbeginner.com/wp-content/uploads/2014/12/how-to-add-youtube-video-as-fullscreen-background-in-wordpress-og.png)
Why Use a YouTube Video as a Fullscreen Background?
An enticing and crowd pleasing video background is a good way to maintain guests in your website. When guests first land in your WordPress web site, you solely have just a few seconds to seize their consideration and get them to remain.
As of late, many various WordPress themes assist video backgrounds. Nevertheless, importing and internet hosting a video on WordPress can take quite a lot of bandwidth.
Relying in your WordPress internet hosting plan, you may even have to purchase further storage.
At WPBeginner, we extremely suggest not importing your movies to WordPress.
As an alternative, you need to use a service like YouTube after which embed the video as a background to your WordPress web site. On this manner, you possibly can stand out out of your opponents with out slowing down your web site.
That stated, let’s see how one can add a YouTube video as a fullscreen background in your WordPress web site. We’ll present you two strategies, and you need to use these fast hyperlinks to navigate between them:
Methodology 1: Use Superior WordPress Backgrounds for Fullscreen Video Background (Free)
If you’re searching for a free and simple manner so as to add a YouTube video as a fullscreen background, then you need to use Advanced WordPress Backgrounds.
This free plugin provides a Background block that lets you create a fullscreen background utilizing any colour, picture, or video, together with YouTube movies.
First, you will have to put in and activate the plugin. In case you need assistance, then please see our information on set up a WordPress plugin.
Upon activation, merely head to the web page or submit the place you need to add a YouTube video as a fullscreen background. You possibly can then go forward and click on on the ‘+’ add block button.
Within the popup that seems, begin typing in ‘Background AWB’. When the precise block seems, give it a click on so as to add it to the web page.
![How to add a fullscreen video to a WordPress blog post or page How to add a fullscreen video to a WordPress blog post or page](https://www.wpbeginner.com/wp-content/uploads/2014/12/adding-awb-background.png)
![How to add a fullscreen video to a WordPress blog post or page How to add a fullscreen video to a WordPress blog post or page](https://www.wpbeginner.com/wp-content/uploads/2014/12/adding-awb-background.png)
Within the left-hand menu, you will notice three tabs for the totally different sorts of fullscreen backgrounds you possibly can create: Coloration, Picture, and Video.
Because you need to add a YouTube video, click on on the ‘Video’ tab. After that, select the ‘YouTube / Vimeo‘ tab.
Now you can copy and paste the URL of the YouTube video that you simply need to use in your WordPress weblog.
![Getting the URL for a YouTube video Getting the URL for a YouTube video](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-video-url.png)
![Getting the URL for a YouTube video Getting the URL for a YouTube video](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-video-url.png)
Now, the WordPress block editor will present a preview of how this background will look.
Superior WordPress Backgrounds adjustments the dimensions of the video based mostly on the content material you add on high of it, so don’t fear if the video presently appears a bit small.
![How to customize a YouTube background video in WordPress How to customize a YouTube background video in WordPress](https://www.wpbeginner.com/wp-content/uploads/2014/12/video-background-default.png)
![How to customize a YouTube background video in WordPress How to customize a YouTube background video in WordPress](https://www.wpbeginner.com/wp-content/uploads/2014/12/video-background-default.png)
By default, the video background is disabled on cell units.
Nevertheless, in case you do need to present the video background on cell units, then click on to activate the ‘Allow on cell units’ toggle.
![Showing a YouTube background on mobile devices Showing a YouTube background on mobile devices](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-background-mobile.png)
![Showing a YouTube background on mobile devices Showing a YouTube background on mobile devices](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-background-mobile.png)
Out of the field, the block will play your entire YouTube video on a loop.
An alternative choice is to play a particular portion of the video by typing the precise instances into the ‘Begin Time’ and ‘Finish Time’ bins.
You may as well cease the video from enjoying on a loop by disabling the ‘Loop’ toggle.
![How to add a YouTube background video to a website How to add a YouTube background video to a website](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-start-end.png)
![How to add a YouTube background video to a website How to add a YouTube background video to a website](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-start-end.png)
By default, the video will solely play when the customer can see it of their browser. It will assist preserve your web site efficiency, so you’ll sometimes need to depart the ‘At all times play’ toggle disabled.
Whenever you first add the video, it’s proven at 100% opacity, so it appears stable. Be happy to pull the ‘Picture Opacity’ slider to make the YouTube video background extra delicate.
![Changing the opacity settings for a YouTube video Changing the opacity settings for a YouTube video](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-image-opacity-.png)
![Changing the opacity settings for a YouTube video Changing the opacity settings for a YouTube video](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-image-opacity-.png)
In case you experiment with opacity, then you might also need to strive including a coloured overlay.
Merely click on to broaden the ‘Overlay Coloration’ part after which use the settings to create totally different coloured overlays.
![Adding an overlay to a video background Adding an overlay to a video background](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-overlay-color.png)
![Adding an overlay to a video background Adding an overlay to a video background](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-overlay-color.png)
Be happy to discover different settings, just like the parallax impact and spacing, to make the background look precisely such as you need it.
When you’re pleased with how the YouTube video background is about up, it’s time to start out including content material like hyperlinks, texts, and pictures.
To begin, click on on the ‘+’ icon in the course of the Background (AWB) block.
![Adding blocks to a YouTube background video Adding blocks to a YouTube background video](https://www.wpbeginner.com/wp-content/uploads/2014/12/content-youtube-background.png)
![Adding blocks to a YouTube background video Adding blocks to a YouTube background video](https://www.wpbeginner.com/wp-content/uploads/2014/12/content-youtube-background.png)
This opens a popup the place you possibly can select the block you need to add. The Superior WordPress Backgrounds plugin works with all the usual WordPress blocks, so you possibly can add any content material you need.
When you’re pleased with the way it appears, simply click on the ‘Replace’ or ‘Publish’ button to make the web page dwell. Now, in case you go to your WordPress web site, then you will notice the video background in motion.
![An example of a YouTube video background in WordPress An example of a YouTube video background in WordPress](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-video-background.gif)
![An example of a YouTube video background in WordPress An example of a YouTube video background in WordPress](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-video-background.gif)
Methodology 2: Use Thrive Architect to Add a Fullscreen Video Background (Beneficial)
If you’re seeking to totally customise your fullscreen background video and even simply design all of the pages in your web site, then this methodology is for you.
The easiest way so as to add a YouTube video as a fullscreen background is with Thrive Architect.
Thrive Architect is an easy-to-use web page builder plugin made for learners in thoughts. In addition to a video background characteristic, it has a drag-and-drop performance that’s versatile to make use of, so you possibly can create the web site you need with none problem.
Moreover, it comes with sensible touchdown web page templates which can be optimized for conversions, so your touchdown web page is about up for fulfillment from the get-go.
For extra details about Thrive Architect, you possibly can learn our Thrive Architect overview.
![Is Thrive Architect the right page builder plugin for you? Is Thrive Architect the right page builder plugin for you?](https://www.wpbeginner.com/wp-content/uploads/2023/11/thrive-architect-wordpress.png)
![Is Thrive Architect the right page builder plugin for you? Is Thrive Architect the right page builder plugin for you?](https://www.wpbeginner.com/wp-content/uploads/2023/11/thrive-architect-wordpress.png)
If you wish to use this methodology, go forward and buy a Thrive Architect plan first. It’s out there for buy as a standalone product or as a part of the Thrive Themes bundle.
Then, merely set up the plugin. You possibly can take a look at our information on set up a WordPress plugin for extra info.
After that, you possibly can go to ‘Pages’ from the WordPress admin space and choose a web page to edit. Hover over the web page and select ‘Edit with Thrive Architect.’
![Clicking Edit with Thrive Architect on a page Clicking Edit with Thrive Architect on a page](https://www.wpbeginner.com/wp-content/uploads/2023/11/edit-with-thrive-architect-min.png)
![Clicking Edit with Thrive Architect on a page Clicking Edit with Thrive Architect on a page](https://www.wpbeginner.com/wp-content/uploads/2023/11/edit-with-thrive-architect-min.png)
Subsequent, click on the ‘+’ button on the precise aspect of the web page and discover the Background Part component.
Simply click on on it so as to add it to the web page.
![Adding a Background section in Thrive Architect Adding a Background section in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/add-background-section-thrive-min.png)
![Adding a Background section in Thrive Architect Adding a Background section in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/add-background-section-thrive-min.png)
At this level, you possibly can navigate to the left aspect of the web page and scroll right down to the Background Fashion part.
Right here, simply activate the ‘Video background’ toggle and choose ‘YouTube’ for the Supply.
![Selecting a video background style in Thrive Architect Selecting a video background style in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/video-background-thrive-min.png)
![Selecting a video background style in Thrive Architect Selecting a video background style in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/video-background-thrive-min.png)
After that, go to the YouTube video that you simply need to use as a fullscreen background.
Simply copy the YouTube video URL like so:
![Getting the URL for a YouTube video Getting the URL for a YouTube video](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-video-url.png)
![Getting the URL for a YouTube video Getting the URL for a YouTube video](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-video-url.png)
Then, paste the URL within the applicable part.
It’s best to now see the background on the display.
![Pasting video background URL in Thrive Architect Pasting video background URL in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/pasting-url-video-background-thrive-min.jpg)
![Pasting video background URL in Thrive Architect Pasting video background URL in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/pasting-url-video-background-thrive-min.jpg)
Whereas the background is added, it’s not fullscreen simply but.
To verify it’s fullscreen, you might want to scroll as much as the Major Choices part. Then, allow the ‘Content material covers complete display width’, ‘Match top to display’, and ‘Stretch to suit display width choices’.
![video-background-height-width-thrive-min Adjusting the video background height and width in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/video-background-height-width-thrive-min.jpg)
![video-background-height-width-thrive-min Adjusting the video background height and width in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/video-background-height-width-thrive-min.jpg)
Let’s discover some extra choices. So as to add some content material to your background, all you might want to do is click on the ‘+’ button on the precise aspect once more and drag and drop a component.
You possibly can add texts, photographs, varieties, buttons, testimonials, and extra. Thrive Architect has dozens of conversion-focused components you can leverage to your web site.
![add-element-thrive-min](https://www.wpbeginner.com/wp-content/uploads/2023/11/add-element-thrive-min.jpg)
![add-element-thrive-min](https://www.wpbeginner.com/wp-content/uploads/2023/11/add-element-thrive-min.jpg)
In case you assume the background colour doesn’t distinction nicely sufficient with the textual content, merely return to the Background Part settings.
Then, scroll right down to Background Fashion once more, and within the Add Layer possibility, select a stable colour. After that, you possibly can select a colour to make use of as a background filter and regulate the opacity as you want.
As soon as you might be completed, simply click on ‘Apply.’
![Changing the color overlay opacity in Thrive Architect Changing the color overlay opacity in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/background-overlay-video-thrive-min-1.jpg)
![Changing the color overlay opacity in Thrive Architect Changing the color overlay opacity in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/background-overlay-video-thrive-min-1.jpg)
One other factor you possibly can regulate within the Background Part settings is the Scroll Conduct. You possibly can select whether or not to make it static, sticky, or parallax.
We suggest simply protecting it static in order that the background doesn’t transfer because the consumer scrolls down. In any other case, the video will carry on enjoying, which might decelerate your web site.
![Adjusting the scroll behavior of the video background in Thrive Architect Adjusting the scroll behavior of the video background in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/scroll-behavior-video-thrive-min.jpg)
![Adjusting the scroll behavior of the video background in Thrive Architect Adjusting the scroll behavior of the video background in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/scroll-behavior-video-thrive-min.jpg)
The following factor you are able to do is go to the Responsive part. Right here, you possibly can select whether or not to make the video background seem on the cell and pill variations of your web site.
It’s as much as you, however do keep in mind that movies take some time to load. It could get annoying to your guests to attend for them to run when they’re on a small-screen gadget.
![Adjusting the responsiveness behavior of the video background in Thrive Architect Adjusting the responsiveness behavior of the video background in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/responsive-video-thrive-min.jpg)
![Adjusting the responsiveness behavior of the video background in Thrive Architect Adjusting the responsiveness behavior of the video background in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/responsive-video-thrive-min.jpg)
As soon as you might be happy with the fullscreen YouTube video background, merely click on the ‘Save Work’ button to avoid wasting your adjustments.
That’s it!
![save-work-thrive-architect-min](https://www.wpbeginner.com/wp-content/uploads/2023/11/save-work-thrive-architect-min.jpg)
![save-work-thrive-architect-min](https://www.wpbeginner.com/wp-content/uploads/2023/11/save-work-thrive-architect-min.jpg)
Now, go to your WordPress web site to see the way it appears dwell.
Right here’s what our check internet web page appears like.
![Video background example made with Thrive Architect Video background example made with Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/video-background-thrive-example.gif)
![Video background example made with Thrive Architect Video background example made with Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2023/11/video-background-thrive-example.gif)
Bonus Tip: Add a YouTube Video Feed in WordPress
Do you need to add extra movies to your web site? Whereas WordPress has built-in video embed blocks, they aren’t essentially the most visually interesting option to show movies, particularly if in case you have a number of of them.
That’s the place Smash Balloon YouTube Feed Pro is available in.
Smash Balloon YouTube Feed Professional is the very best YouTube gallery plugin in the marketplace. It robotically exhibits all the newest movies out of your YouTube channel, so your guests will at all times see the most recent content material.
![Embedding a YouTube playlist using Smash Balloon Embedding a YouTube playlist using Smash Balloon](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-embed-example.png)
![Embedding a YouTube playlist using Smash Balloon Embedding a YouTube playlist using Smash Balloon](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-embed-example.png)
Merely create a YouTube feed utilizing Smash Balloon’s straightforward editor, after which add it to any web page or submit utilizing both shortcode or the plugin’s ready-made block.
You may as well use Smash Balloon to embed YouTube playlists, favorites, and dwell streams in your WordPress web site.
![Creating a YouTube feed using the Smash Balloon social media plugin Creating a YouTube feed using the Smash Balloon social media plugin](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-smashballoon-editor.png)
![Creating a YouTube feed using the Smash Balloon social media plugin Creating a YouTube feed using the Smash Balloon social media plugin](https://www.wpbeginner.com/wp-content/uploads/2014/12/youtube-smashballoon-editor.png)
The perfect factor about Smash Balloon is that it doesn’t decelerate your website. The plugin’s built-in YouTube caching characteristic will make sure that your website at all times masses quick, which is nice for search engine optimization.
For extra particulars, you possibly can see our information on present the newest movies from a YouTube channel in WordPress.
We hope this text helped you learn to add a YouTube video as a background in WordPress. You might also need to take a look at our information on create a touchdown web page with WordPress and our knowledgeable picks for the very best YouTube video gallery plugins.
In case you favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may as well discover us on Twitter and Facebook.
Leave a comment