One of my YouTube subscribers asked if it is possible to add a video background using YouTube instead of hosting the video on your own server. This is possible but let’s go over a few things before we start the tutorial.
There are pros and cons in using YouTube to host you background video. The biggest drawback is that unless it is your own video on YouTube, you can not be sure that it will be there for a long time as YouTube users can delete their video whenever they want.
The other drawback is that you can not be sure of the quality of the video as YouTube will serve up the quality that they determine is best for your device.
Finally, I have noticed a bit of a delay in the loading of the video background when the video is hosted on YouTube.
The biggest benefit of using a YouTube video as your background is that you do not have to worry about exceeding your data limits on your server as YouTube is hosting the video on their network.
With all that said, let’s get started and change the Altitude Pro theme so that it has a YouTube hosted video background.
Go to your WordPress dashboard and click on the Plugins button and then click on the Add New button. Now search for a plugin called mb.YTPlayer for background videos. Once you’ve located the plugin, click on Install Now and then activate the plugin.
On the top right hand corner of the mb.ideas settings screen, you will see an option that says “GO PLUS FOR 8 EUR ONLY”. Get this option, if you want to follow along with this tutorial.
Once you have purchased the Plus version of the plugin, install the plugin and move to step 2
Underneath the mb.YTPlayer PLUS for background videos plugin you will see a Settings link. Click on this link. Once you have clicked on settings you will see a section labelled “The YouTube video URL is:”. Enter your YouTube url in the adjacent text box.
Directly below this section is another section labeled “The page where to show the background video is:”. Select “Blog index Homepage” on this section and then save. The rest of the settings can be left as is.
We now have to edit a little bit of code. Open your favourite text editor and navigate to your plugins folder. Inside that folder, look for a folder call wp-ytplayer-plus/js/jquery.mb.YTPlayer.min.js
Do a search for zindex and change the third occurrence of the search from “zIndex:0” to “zIndez:10” and then save. If we check our browser, we will see that the video is taking up the entire page. A little CSS is required to fix this.
Open you styles.css file and go make the following changes;
on line 593 .site-inner change the z-index: 9; to zindex: inherit;
on line 1369 add the following code
position: relative;z-index: 11;
on line 1283
change the z-index: 9; to z-index: 11;
on line 1733 add the following code
position: relative;z-index: 11;
on line 1008 add the following code
position: relative;z-index: 12;
on line 974
change the z-index: 999; to zindex: 11;
Save your code and check your browser. You should now have a video background using a YouTube video.
I hope you found this tutorial usefull. If you did, don’t forget to subscribe to this channel and don’t forget to visit wpbasics.org for other great tutorials and articles.
“DISCLOSURE: I may be an affiliate for products that I recommend. If you purchase those items through my links I will earn a commission. You will not pay more when buying a product through my link. In fact, I oftentimes am able to negotiate a lower rate (or bonuses) not available elsewhere. Plus, when you order through my link, it helps me to continue to offer you lots of free stuff. 🙂 Thank you, in advance for your support”