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.
I will be showing you Option 2 for this post.
Step 1:
Install the plugin listed above
Step 2:
Set 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.
Should you do this?
It’s neat, but you need to think about the extra time this can add to your page load time.