Video background in Genesis using jQuery

In this article I share my findings in implementing Victa’s Background video jQuery plugin in Genesis Sample theme (should work in other Genesis themes as well with minor changes).

Screenshots:

video-background-genesis

full-view-background-video-genesis

Videos are in the post below.

Step 1

Download the jQuery plugin’s zip file from here.

Step 2

Extract the contents and upload jquery.backgroundvideo.min.js to child theme directory/js.

Step 3

Create a file named jquery.backgroundvideo.init.js having the following code and upload it to the same location.

1 2 3 4 5 6 7 8 9 10 11 12
jQuery(function( $ ){
 
var videobackground = new $.backgroundVideo($('.bg-video'), {
"align": "centerXY",
"width": 1280,
"height": 720,
"path": "http://genesis.dev/wp-content/themes/genesis-sample/media/video/",
"filename": "cloud",
"types": ["mp4","ogg","webm"]
});
 
});

Change the value of ‘path’ to that of your site.

Step 4

Upload the video files to child theme directory/media/video.

Screen Shot 2014-03-16 at 12.44.23 PM

While following this tutorial, you might want to use the video files that come with the jQuery plugin. Once you understand how this all works together, you can replace them with your own. You would then change the width and height values in jquery.backgroundvideo.init.js to those of your video. If you are on a Mac, video dimensions can be seen in the File Info window (Cmd + I with the mp4 file selected in Finder).

Step 5

Let’s load the js files and add a .bg-video section below header on homepage. Add the following in functions.php:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
//* Remove the site description
remove_action( 'genesis_site_description', 'genesis_seo_site_description' );
 
//* Enqueue jQuery - Background video
add_action( 'wp_enqueue_scripts', 'enqueue_html5_background_video' );
function enqueue_html5_background_video() {
 
if ( (is_home() || is_front_page()) && !wp_is_mobile() ) {
 
wp_enqueue_script( 'backgroundvideo', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.backgroundvideo.min.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'backgroundvideo-init', get_stylesheet_directory_uri() . '/js/jquery.backgroundvideo.init.js', array( 'backgroundvideo' ), '1.0.0', true );
 
}
 
}
 
add_action( 'genesis_after_header', 'sk_bkgrd_video' );
function sk_bkgrd_video() {
 
if ( is_home() || is_front_page() ) {
 
echo '<div class="bg-video">
<div class="wrap">
<div class="video-caption">
<div class="video-headline">This is your main Headline</div>
<div class="video-tagline">This is the your tagline. Nulla egestas dapibus metus, sed vestibulum nisl scelerisque sed.</div>
</div>
</div>
</div>';
 
}
 
}
view raw functions.php hosted with ❤ by GitHub

We shall set the background video for the .bg-video section only on site’s homepage and on non handheld devices i.e, not on mobiles and tablets.

Step 6

At 1024px and below widths, we will use an image as background for it instead of the video.

Add the following in style.css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
a img {
margin-bottom: 0;
}
 
.site-title {
margin-bottom: 0;
}
 
.site-header .wrap {
padding: 0;
}
 
.nav-header a {
padding: 1.8rem 2.4rem;
}
 
.bg-video .wrap {
text-align: center;
}
 
.bg-video .video-caption {
text-align: center;
color: #fff;
padding: 200px 0;
}
 
.bg-video .video-caption .video-headline {
font-size: 34px;
text-shadow: 3px 3px rgba(0, 0, 0, 0.1);
font-weight: bold;
}
 
.bg-video .video-caption .video-tagline {
font-size: 28px;
}
 
.bg-video .video-tagline a {
border-bottom: 1px dotted #fff;
color: #fff;
}
 
@media only screen and (max-width: 1024px) {
 
.bg-video {
background: url('media/video/cloud.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
 
}
view raw gistfile1.css hosted with ❤ by GitHub

Result:

Notice how the background is being applied to the full webpage instead of to just the .bg-video section. I am still trying to figure out the reason and a proper solution to this but in the meantime we can use this CSS workaround:

1 2 3 4 5 6 7 8 9 10 11 12 13
@media only screen and (min-width: 1025px) {
 
.home .site-inner {
max-width: none;
background: #f5f5f5;
}
 
.home .content-sidebar-wrap {
max-width: 1140px;
margin: 0 auto;
}
 
}
view raw gistfile2.css hosted with ❤ by GitHub

Result:

Part 2

Let’s take the above and expand on it by adding the following features:

  1. Header to slide up and away when scrolling down and fade back in view when scrolling up
  2. Adding an arrow near the bottom of the .bg-video section when when clicked will scroll the user smoothly to content area
  3. Setting the height of Background Video section equal to that of viewport

jquery.scrollTo.min.js

jquery.localScroll.min.js

main.js:

1 2 3 4 5 6 7 8 9 10 11 12 13 14
jQuery(function( $ ){
 
$(window).scroll(function () {
 
var yPos = ( $(window).scrollTop() );
if( yPos > 75 ) { // fade out fixed header after 75 pixels have been scrolled down from the top
$(".site-header").slideUp();
} else {
$(".site-header").fadeIn();
}
 
});
 
});
view raw main.js hosted with ❤ by GitHub

home.js:

1 2 3 4 5 6 7 8 9 10 11 12 13 14
jQuery(function( $ ){
 
$('.bg-video .wrap') .css({'height': (($(window).height()))+'px'});
$(window).resize(function(){
$('.bg-video .wrap') .css({'height': (($(window).height()))+'px'});
});
 
$(".video-caption .video-tagline").after('<p class="arrow"><a href="#site-inner"></a></p>');
 
$.localScroll({
duration: 750
});
 
});
view raw home.js hosted with ❤ by GitHub

functions.php:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
//* Remove the site description
remove_action( 'genesis_site_description', 'genesis_seo_site_description' );
 
//* Load site-wide js. In this case, it has the code to slide the header away when scrolling down and fade it in when scrolling up
add_action( 'wp_enqueue_scripts', 'sk_site_wide_scripts' );
function sk_site_wide_scripts() {
 
wp_enqueue_style( 'dashicons' );
wp_enqueue_script( 'main', get_stylesheet_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.0', true );
 
}
 
//* Enqueue jQuery - Background video
add_action( 'wp_enqueue_scripts', 'enqueue_html5_background_video' );
function enqueue_html5_background_video() {
 
if ( (is_home() || is_front_page()) && !wp_is_mobile() ) {
 
wp_enqueue_script( 'backgroundvideo', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.backgroundvideo.min.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'backgroundvideo-init', get_stylesheet_directory_uri() . '/js/jquery.backgroundvideo.init.js', array( 'backgroundvideo' ), '1.0.0', true );
 
// for smooth scrolling when the down arrow is clicked
wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '', true );
 
// for setting the height of Background Video section equal to that of viewport, adding the down arrow, and setting smooth scrolling speed
wp_enqueue_script( 'home', get_bloginfo( 'stylesheet_directory' ) . '/js/home.js', array( 'jquery', 'localScroll' ), '1.0.0', true );
 
}
 
}
 
add_action( 'genesis_after_header', 'sk_bkgrd_video' );
function sk_bkgrd_video() {
 
if ( is_home() || is_front_page() ) {
 
echo '<div class="bg-video">
<div class="wrap">
<div class="video-caption">
<div class="video-headline">This is your main Headline</div>
<div class="video-tagline">This is the your tagline. Nulla egestas dapibus metus, sed vestibulum nisl scelerisque sed.</div>
</div>
</div>
</div>';
 
}
 
}
 
//* Add a ID to .site-inner on homepage
add_filter( 'genesis_attr_site-inner', 'custom_attributes_content' );
function custom_attributes_content( $attributes ) {
 
if ( is_home() || is_front_page() ) {
$attributes['id'] = 'site-inner';
}
return $attributes;
 
}
view raw gistfile3.php hosted with ❤ by GitHub

style.css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
a img {
margin-bottom: 0;
}
 
.site-title {
margin-bottom: 0;
}
 
.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
 
.admin-bar .site-header {
top: 32px;
}
 
.site-header + .site-inner {
padding-top: 100px;
}
 
.site-header .wrap {
padding: 0;
}
 
.nav-header a {
padding: 1.8rem 2.4rem;
}
 
.bg-video {
position: relative;
}
 
.bg-video .wrap {
text-align: center;
display: table;
}
 
.bg-video .video-caption {
display: table-cell;
vertical-align: middle;
color: #fff;
}
 
.bg-video .video-caption .video-headline {
font-size: 34px;
text-shadow: 3px 3px rgba(0, 0, 0, 0.1);
font-weight: bold;
}
 
.bg-video .video-caption .video-tagline {
font-size: 28px;
}
 
.bg-video .video-tagline a {
border-bottom: 1px dotted #fff;
color: #fff;
}
 
.arrow {
margin: 0;
text-align: center;
width: 100%;
}
 
.arrow a {
background: rgba(0, 0, 0, 0.6);
border-radius: 30px;
display: inline-block;
padding: 13px 10px 6px;
text-align: center;
line-height: 1;
position: absolute;
bottom: 30px;
left: 50%;
}
 
.arrow a:before {
-webkit-font-smoothing: antialiased;
color: rgba(255, 255, 255, 0.8);
content: "\f347";
font: normal 25px/1 'dashicons';
height: 40px;
width: 40px;
}
 
.arrow a:focus {
outline: none;
}
 
@media only screen and (min-width: 1025px) {
 
.home .site-inner {
max-width: none;
background: #f5f5f5;
}
 
.home .content-sidebar-wrap {
max-width: 1140px;
margin: 0 auto;
}
 
}
 
@media only screen and (max-width: 1024px) {
 
.bg-video {
background: url('media/video/cloud.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 50px;
padding-bottom: 50px;
}
 
}
view raw gistfile4.css hosted with ❤ by GitHub

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 573 other subscribers

Donate

Found this article helpful?

Comments

  1. says

    Hi Sridhar

    Had a play with this today on a new domain – looks great. Thank you very much for your efforts here, much appreciated.

    http://thresholdrecruitment.co.uk/

    The only issue I had is with the mobile version, which is likely affected by the logo image I used, instead of the text you have in your version.

    What do you think? Any advice?

    Best

    Matt

  2. says

    I love it! This is exactly what I needed. The site is still in progress but this is a great start.

    A few questions…

    Why would it change the look of my typekit fonts? Their edges are jagged now.
    Any recommendations for speeding up the initial load time?
    Can I get rid of the sound or do I need to edit the video?
    Can I make it user-controlled so it stops (or plays) on command?

    Thanks!

  3. says

    Is there a way to make the visible are of the video exactly fit the screen? So the down arrow will sit just above the fold no matter what.

    Thanks again!

  4. says

    Have you tried this plugin? http://wordpress.org/plugins/wpmbytplayer/
    Very easy to use with YouTube & Vimeo and you can also display a full width video with controls inside a section, not just as a background.

    Also this jquery http://dfcb.github.io/BigVideo.js/ is the most responsive of all full screen or full width section apps I’ve seen and tested but I can’t figure out how to use it with YouTube… As is it only works with HTML5 self-hosted or with premium account Vimeo.

    I’ll be interested to see your opinion on either one compared to this HTML5-Background-Video jquery.

      • says

        It worked perfectly with Centric Pro. I’ve only just begun learning jQuery and haven’t had a chance to play around with it much, but it works. :)

  5. says

    Another cool thing to try. 1 question. When we add different jquery plugins should they all be a separate file that we have to enqueue separately in functions or can we keep adding them to 1 file like “scripts.js”?

  6. says

    Hey Sridhar,

    Thanks for the awesome tutorial! I’m having a bit of a problem getting the video to be stretched vertically to cover the entire viewport when smaller than 1000px wide. Not sure what this is, despite using part two of the code.

    http://procon.staging.wpengine.com/

    Any idea of tricks to use to make that happen? I don’t care if the video width is cut off, if that means the viewport is covered.

    Thanks,
    Alexandra

Trackbacks

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>