Hello folks, and welcome to another video tutorial by WPbasics.org.
One of my YouTube subscribers asked if it is possible to add a background video to Altitude Pro
using a YouTube video 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 bennifit of using a YouTube video as you background is that you do not have
to worry about exceding 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 from this
to this.
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
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.
Step 3 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 occurance 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.
Step 4 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.
Bye now.
Không có nhận xét nào:
Đăng nhận xét