WPbasics - A beginners resource for WordPress

A beginners resource for WordPress

  • Home
  • Blog
  • About
  • Contact Us
  • Start a Blog
  • Recommended Hosts

Video Background Using YouTube | Altitude Pro

Last updated on August 8, 2017 By WPbasics Leave a Comment

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.

Step 1

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 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.

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.

Test drive the Altitude Pro Theme


“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”

Share is caring:

  • Facebook
  • Twitter
  • Google
  • Reddit
  • Pinterest
  • More
  • LinkedIn
  • Pocket
  • Tumblr
  • WhatsApp
  • Skype
  • Print
  • Email

Related

Filed Under: mb.YTPlayer, Plugins, Tutorials, Video Background Tagged With: Altitude Pro, Genesis Framework, Video Background, WordPress

Leave A Reply Cancel reply

Flywheel

Get Local by Flywheel

Recent Posts

  • How to disable the cache in Chrome while developing
  • What is your favourite browser for development
  • How to copy a live WordPress site to a localhost
  • How to Create a Localhost for a WordPress Site Using Local by Flywheel
  • Full width search form on top of the header
  • How to add a Utility Bar to the Altitude Pro Theme
  • Add a Search Icon to Mobile in Monochrome Pro
  • HTML and CSS Tutorials for Beginners
  • Enable Multiple Undos in Photoshop
  • Recommended Hosts

Recommended Host

Web Hosting

Popular Posts

  • How to copy a live WordPress site to a local host | Duplicator
  • How to add a jQuery UI Accordion to WordPress
  • Advanced Custom Fields | Custom Front Page
  • From Bootstrap to WordPress
  • How to add jQuery UI Tabs to WordPress
  • Replace the image background with a video | Altitude Pro
  • Equal Height Columns No Plugin
  • Advanced Custom Fields | Restaurant Menu
  • Full width search form on top of the header
  • Why use the Genesis Framework | WordPress

Copyright © 2018 · WPbasics ·

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.