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.
Why Use a YouTube Video as a Fullscreen Background?
An engaging and eye-catching video background is a great way to keep visitors on your site. When visitors first land on your WordPress website, you only have a few seconds to grab their attention and get them to stay.
These days, many different WordPress themes support video backgrounds. However, uploading and hosting a video 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.
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 a YouTube video as a fullscreen background, 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. 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. You can then 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.
In the left-hand menu, you will see three tabs for the different kinds of fullscreen 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 that you want to use on your WordPress blog.
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.
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.
Out of the box, the block will play the entire YouTube video 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.
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.
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.
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.
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.
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.
Method 2: Use Thrive Architect to Add a Fullscreen Video Background (Recommended)
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.
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.’
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.
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.
After that, go to the YouTube video that you want to use as a fullscreen background.
Just copy the YouTube video URL like so:
Then, paste the URL in the appropriate section.
You should now see the background on the screen.
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’.
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.’
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.
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.
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.
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.
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.
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 guide on how to show the latest videos from a YouTube channel in WordPress.
We hope this article 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 landing page with WordPress and our expert picks for the best YouTube video gallery plugins.
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.
The post How to Add YouTube Video as Fullscreen Background in WordPress first appeared on WPBeginner.
from WPBeginner https://ift.tt/K53zVB2
More links is https://mwktutor.com
No comments:
Post a Comment