How to Add YouTube Video as Fullscreen Background in WordPress

Learn how to Add YouTube Video as Fullscreen Background in WordPress

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 preserve them in your web site. This makes movies an incredible selection 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.

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 just a few seconds to seize their consideration and get them to remain.

Today, many alternative WordPress themes assist video backgrounds. Nonetheless, importing and internet hosting a video on WordPress can take lots of bandwidth.

Relying in your WordPress internet hosting plan, you may even have to purchase additional storage.

At WPBeginner, we extremely suggest not importing your movies to WordPress.

As a substitute, 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 may 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)

In case you are searching 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 permits you to 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 publish the place you need to add a YouTube video as a fullscreen background. You may then go forward and click on on the ‘+’ add block button.

Within the popup that seems, begin typing in ‘Background AWB’. When the best 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

Within the left-hand menu, you will notice three tabs for the completely different sorts of fullscreen backgrounds you may 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.

Getting the URL for a YouTube video

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

Superior WordPress Backgrounds modifications the dimensions of the video primarily based on the content material you add on high of it, so don’t fear if the video at present appears to be like a bit small.

How to customize a YouTube background video in WordPress

By default, the video background is disabled on cell units.

Nonetheless, in the event 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

Out of the field, the block will play your entire YouTube video on a loop. 

Another choice is to play a selected portion of the video by typing the precise instances into the ‘Begin Time’ and ‘Finish Time’ containers. 

You may as well cease the video from taking part in on a loop by disabling the ‘Loop’ toggle.

How to add a YouTube background video to a website

By default, the video will solely play when the customer can see it of their browser. This can assist preserve your web site efficiency, so you’ll sometimes need to depart the ‘At all times play’ toggle disabled.

While you first add the video, it’s proven at 100% opacity, so it appears to be like stable. Be at liberty to pull the ‘Picture Opacity’ slider to make the YouTube video background extra delicate.  

Changing the opacity settings for a YouTube video

In case you experiment with opacity, then you may additionally need to attempt including a coloured overlay. 

Merely click on to broaden the ‘Overlay Coloration’ part after which use the settings to create completely different coloured overlays.

Adding an overlay to a video background

Be at liberty 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 proud of how the YouTube video background is ready up, it’s time to start out including content material like hyperlinks, texts, and pictures. 

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

Adding blocks to a YouTube background video

This opens a popup the place you may select the block you need to add. The Superior WordPress Backgrounds plugin works with all the usual WordPress blocks, so you may add any content material you need.

If you end up proud of the way it appears to be like, simply click on the ‘Replace’ or ‘Publish’ button to make the web page dwell. Now, in the event 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

In case you are 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 best 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 newbies in thoughts. Moreover a video background function, it has a drag-and-drop performance that’s versatile to make use of, so you may create the web site you need with none trouble.

Moreover, it comes with good touchdown web page templates which might be optimized for conversions, so your touchdown web page is ready up for fulfillment from the get-go.

For extra details about Thrive Architect, you may learn our Thrive Architect assessment.

Is Thrive Architect the right page builder plugin for you?

If you wish to use this methodology, go forward and buy a Thrive Architect plan first. It’s accessible for buy as a standalone product or as a part of the Thrive Themes bundle.

Then, merely set up the plugin. You may take a look at our information on set up a WordPress plugin for extra data.

After that, you may 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

Subsequent, click on the ‘+’ button on the best aspect of the web page and discover the Background Part ingredient.

Simply click on on it so as to add it to the web page.

Adding a Background section in Thrive Architect

At this level, you may navigate to the left aspect of the web page and scroll all the way down to the Background Type part.

Right here, simply activate the ‘Video background’ toggle and choose ‘YouTube’ for the Supply.

Selecting a video background style in Thrive Architect

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:

Getting the URL for a YouTube video

Then, paste the URL within the applicable part.

You need to now see the background on the display.

Pasting video background URL in Thrive Architect

Whereas the background is added, it’s not fullscreen simply but.

To ensure it’s fullscreen, you could scroll as much as the Important Choices part. Then, allow the ‘Content material covers complete display width’, ‘Match top to display’, and ‘Stretch to suit display width choices’.

Adjusting the video background height and width in Thrive Architect

Let’s discover some extra choices. So as to add some content material to your background, all you could do is click on the ‘+’ button on the best aspect once more and drag and drop a component.

You may add texts, photos, kinds, buttons, testimonials, and extra. Thrive Architect has dozens of conversion-focused components that you would be able to leverage to your web site.

In case you suppose the background colour doesn’t distinction effectively sufficient with the textual content, merely return to the Background Part settings.

Then, scroll all the way down to Background Type once more, and within the Add Layer choice, select a stable colour. After that, you may select a colour to make use of as a background filter and regulate the opacity as you want.

As soon as you might be performed, simply click on ‘Apply.’

Changing the color overlay opacity in Thrive Architect

One other factor you may regulate within the Background Part settings is the Scroll Conduct. You may select whether or not to make it static, sticky, or parallax.

We suggest simply preserving 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.

Adjusting the scroll behavior of the video background in Thrive Architect

The subsequent factor you are able to do is go to the Responsive part. Right here, you may 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 might get annoying to your guests to attend for them to run when they’re on a small-screen machine.

Adjusting the responsiveness behavior of the video background in Thrive Architect

As soon as you might be glad with the fullscreen YouTube video background, merely click on the ‘Save Work’ button to avoid wasting your modifications.

That’s it!

Now, go to your WordPress web site to see the way it appears to be like dwell.

Right here’s what our check net web page appears to be like like.

Video background example made with Thrive Architect

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 approach to show movies, particularly when 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 robotically exhibits all the most recent movies out of your YouTube channel, so your guests will at all times see the latest content material.

Embedding a YouTube playlist using Smash Balloon

Merely create a YouTube feed utilizing Smash Balloon’s straightforward editor, after which add it to any web page or publish 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

The most effective factor about Smash Balloon is that it doesn’t decelerate your web site. The plugin’s built-in YouTube caching function will be sure that your web site at all times masses quick, which is nice for web optimization.

For extra particulars, you may 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 take a look at our information on create a touchdown web page with WordPress and our professional picks for the perfect 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 Fb.

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다