Youtube Video Background with Aspire Genesis Theme

Aspire is a new theme from Appfinite for Genesis. It’s a great looking theme but a customer was asking if I could take it and put a video background to it.

There are many ways to make a video background. Here are 2 options

Option 1: Use a jquery plugin like bigvideo.js and then set a video background with video files hosted on your site.

Option 2: Use this plugin to call a YouTube video and then tweak the theme to let the video show through.

mb.YTPlayer for background videos

I will be showing you Option 2 for this post.

Step 1:

Install the plugin listed above

Step 2:

mb.ytplayer-settingsSet the plugin video settings with your desired video and settings.
See the image at right how I set this up

At this point the video you won’t see anything but may here the sound. The video is running in the behind everything and we need to adjust z-index’s on a few elements and adjust the z-index in the JS file of the plugin.

Step 3: multiple CSS edits

Line 651: Change the z-index on .site-inner from 9 to inherit
Line 1452: Change the z-index from 9 to 11
Line 1516: Add z-index of 11
Line 1586: Add z-index of 11 and position:relative, change background to transparent
Line 1594: Change margin-top to 120px, change padding to 70px 30px, change width to 28%

Step 4: edits to JS file of mb.YTplayer plugin

open /plugins/wpmbytplayer/js/jquery.mb.YTPlayer.min.js
Search for the 3rd iteration of zIndex:0 and change it to zIndex:10

See it in Action.
I will leave this up for as long as i can. Or at least until i want to try something new.

View Demo

Should you do this?

It’s neat, but you need to think about the extra time this can add to your page load time.



Leave a Comment