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 maintain them in your web site. This makes movies an ideal selection for touchdown pages and gross sales pages.
On this article, we are going to present you add a YouTube video as a fullscreen background in your WordPress web site.
Why Use a YouTube Video as a Fullscreen Background?
An attractive and attention-grabbing video background is a good way to maintain guests in your web site. When guests first land in your WordPress web site, you solely have a number of seconds to seize their consideration and get them to remain.
Nowadays, many alternative WordPress themes assist video backgrounds. Nonetheless, importing and internet hosting a video on WordPress can take plenty 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 approach, you’ll be able to stand out out of your opponents with out slowing down your web site.
That mentioned, let’s see how one can add a YouTube video as a fullscreen background in your WordPress web site. We are going to present you two strategies, and you need to use these fast hyperlinks to navigate between them:
Technique 1: Use Superior WordPress Backgrounds for Fullscreen Video Background (Free)
If you’re on the lookout for a free and straightforward approach so as to add a YouTube video as a fullscreen background, then you need to use Superior 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’ll need to put in and activate the plugin. Should you need assistance, then please see our information on set up a WordPress plugin.
Upon activation, merely head to the web page or publish the place you need to add a YouTube video as a fullscreen background. You’ll be able to then go forward and click on on the ‘+’ add block button.
Within the popup that seems, begin typing in ‘Background AWB’. When the correct block seems, give it a click on so as to add it to the web page.
Within the left-hand menu, you will note three tabs for the totally different sorts of fullscreen backgrounds you’ll be able to 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 just need to use in your WordPress weblog.
Now, the WordPress block editor will present a preview of how this background will look.
Superior WordPress Backgrounds adjustments the scale of the video based mostly on the content material you add on prime of it, so don’t fear if the video at the moment seems a bit small.
By default, the video background is disabled on cellular units.
Nonetheless, in case you do need to present the video background on cellular units, then click on to activate the ‘Allow on cellular units’ toggle.
Out of the field, the block will play your complete YouTube video on a loop.
An alternative choice is to play a particular portion of the video by typing the precise occasions into the ‘Begin Time’ and ‘Finish Time’ containers.
You can too cease the video from taking part in on a loop by disabling the ‘Loop’ toggle.
By default, the video will solely play when the customer can see it of their browser. It will assist keep your web site efficiency, so you’ll sometimes need to go away the ‘All the time play’ toggle disabled.
Whenever you first add the video, it’s proven at 100% opacity, so it seems strong. Be happy to pull the ‘Picture Opacity’ slider to make the YouTube video background extra refined.
Should you experiment with opacity, then you may additionally 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.
Be happy to discover different settings, just like the parallax impact and spacing, to make the background look precisely such as you need it.
If you end up pleased with how the YouTube video background is about up, it’s time to begin including content material like hyperlinks, texts, and pictures.
To start out, click on on the ‘+’ icon in the midst of the Background (AWB) block.
This opens a popup the place you’ll be able to select the block you need to add. The Superior WordPress Backgrounds plugin works with all the usual WordPress blocks, so you’ll be able to add any content material you need.
If you end up pleased with the way it seems, simply click on the ‘Replace’ or ‘Publish’ button to make the web page stay. Now, in case you go to your WordPress web site, then you will note the video background in motion.
Technique 2: Use Thrive Architect to Add a Fullscreen Video Background (Really useful)
If you’re trying to absolutely customise your fullscreen background video and even simply design all of the pages in your web site, then this methodology is for you.
One of the simplest ways 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 novices 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’ll be able to create the web site you need with none trouble.
Moreover, it comes with sensible touchdown web page templates which can be optimized for conversions, so your touchdown web page is about up for achievement from the get-go.
For extra details about Thrive Architect, you’ll be able to learn our Thrive Architect evaluation.
If you wish to use this methodology, go forward and buy a Thrive Architect plan first. It’s obtainable for buy as a standalone product or as a part of the Thrive Themes bundle.
Then, merely set up the plugin. You’ll be able to try our information on set up a WordPress plugin for extra data.
After that, you’ll be able to 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.’
Subsequent, click on the ‘+’ button on the correct facet of the web page and discover the Background Part component.
Simply click on on it so as to add it to the web page.
At this level, you’ll be able to navigate to the left facet of the web page and scroll right down to the Background Model part.
Right here, simply activate the ‘Video background’ toggle and choose ‘YouTube’ for the Supply.
After that, go to the YouTube video that you just need to use as a fullscreen background.
Simply copy the YouTube video URL like so:
Then, paste the URL within the acceptable part.
It is best to now see the background on the display screen.
Whereas the background is added, it’s not fullscreen simply but.
To ensure it’s fullscreen, it’s essential to scroll as much as the Fundamental Choices part. Then, allow the ‘Content material covers total display screen width’, ‘Match top to display screen’, and ‘Stretch to suit display screen width choices’.
Let’s discover some extra choices. So as to add some content material to your background, all it’s essential to do is click on the ‘+’ button on the correct facet once more and drag and drop a component.
You’ll be able to add texts, photographs, types, buttons, testimonials, and extra. Thrive Architect has dozens of conversion-focused parts which you can leverage to your web site.
Should you suppose 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 Model once more, and within the Add Layer possibility, select a strong colour. After that, you’ll be able to select a colour to make use of as a background filter and alter the opacity as you want.
As soon as you’re executed, simply click on ‘Apply.’
One other factor you’ll be able to alter within the Background Part settings is the Scroll Conduct. You’ll be able to select whether or not to make it static, sticky, or parallax.
We suggest simply holding it static in order that the background doesn’t transfer because the person scrolls down. In any other case, the video will carry on taking part in, which may decelerate your web site.
The subsequent factor you are able to do is go to the Responsive part. Right here, you’ll be able to select whether or not to make the video background seem on the cellular 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.
As soon as you’re glad with the fullscreen YouTube video background, merely click on the ‘Save Work’ button to save lots of your adjustments.
That’s it!
Now, go to your WordPress web site to see the way it seems stay.
Right here’s what our take a look at net web page seems like.
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 probably the most visually interesting option to show movies, particularly in case you have a number of of them.
That’s the place Smash Balloon YouTube Feed Professional is available in.
Smash Balloon YouTube Feed Professional is the perfect YouTube gallery plugin in the marketplace. It routinely exhibits all the most recent movies out of your YouTube channel, so your guests will at all times see the latest content material.
Merely create a YouTube feed utilizing Smash Balloon’s simple editor, after which add it to any web page or publish utilizing both shortcode or the plugin’s ready-made block.
You can too use Smash Balloon to embed YouTube playlists, favorites, and stay streams in your WordPress web site.
The very best factor about Smash Balloon is that it doesn’t decelerate your web site. The plugin’s built-in YouTube caching characteristic will be sure that your web site at all times masses quick, which is nice for search engine optimization.
For extra particulars, you’ll be able to see our information on present the most recent movies from a YouTube channel in WordPress.
We hope this text helped you discover ways to add a YouTube video as a background in WordPress. You may additionally need to try our information on create a touchdown web page with WordPress and our professional picks for the perfect YouTube video gallery plugins.
Should you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can too discover us on Twitter and Fb.
