Update on December 13, 2018
The method below is NOT recommended. Follow this instead.
In the past I wrote a tutorial on setting up looping video background for homepage's first section in Parallax Pro here.
Today I am going to show how BigVideo can be used to set up the same. This method is more robust and is preferred over the other.
Note: Auto play of videos (background or not) in handheld devices does not work esp. those by Apple. This is a limitation or rather a design decision taken by device manufacturing companies to reduce unnecessary data loading costs on tablets and mobiles. As such the background video being discussed in this tutorial appears only for desktops. On handhelds, fully stretched image will appear in place of the video.
Step 1
Convert your desired Home Section 1 section's background mp4 video to ogv and webm formats using a software like the free Miro Video Converter. Upload these 3 files to videos under your site's root directory (sample screenshot given at the end of step 4).
Create a static image of this video. Miro has a 'Create Thumbnails' setting that can be used to generate this image. Go to Appearance > Customize and set this as 'Featured Section 1 Image' in the 'Background Images' section.
Step 2
Upload these files to Parallax Pro's js directory:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Thank you Sridhar!
You are Brilliant 🙂
I’m trying to do the same using Jano theme, where should I add the code in front-page.php?
Thanks,
Jonas Samulionis
You are the King! I was wondering how to get the same effect like in a middle widget (not top or bottom of a page).
I am trying to do this in a custom widget area in Minimum Pro (instead of the Home section in Parallax Pro) and after two attempts, it doesn’t seem to be working. I changed out the name of the widget area in the code for front-page.php, but I’m not sure what else I might need to change. I’m not really good with javascript, so I can only assume that I’m following directions correctly.
Any ideas about where to begin troubleshooting?
Thanks!
Love this thanks Sri! One thing I noticed is that it doesn’t seem to work on mobile or tablet…looking into whether it’s possible.
How could I have missed your big disclaimer at the top lol. Ignore me.
Sridhar – I think I am really close here but I’m either getting hung up on where to put the code in step #6 into Altitude’s front-page.php OR I have my video paths incorrect? (The installation appears to be in a folder called html (the client set it up on their server) so that’s in the video url, I tried it with and without – this is the ftp address: ftp://sarasanta%40v3.ankr.com:@v3.ankr.com/html/videos/ANKR_Commercial_2.mp4)
This is my video code in bigvideo-init.js inside the js folder in Altitude Pro:
jQuery(function( $ ){
var BV = new $.BigVideo({container: $(‘.home-section-1’), useFlashForFirefox:false, doLoop: true});
BV.init();
BV.show([
{ type: “video/mp4”, src: “http://v3.ankr.com/html/videos/ANKR_Commercial_2.mp4” },
{ type: “video/webm”, src: “http://v3.ankr.com/html/videos/ANKR_Commercial_2.webmhd.webm” },
{ type: “video/ogg”, src: “http://v3.ankr.com/html/videos/ANKR_Commercial_2.oggtheora.ogv” }
]);
// Fade in the video background after the video is fully loaded
BV.getPlayer().on(‘durationchange’,function(){
$(‘#big-video-wrap’).fadeIn();
});
});
This is where I put the step #6 code in front-page.php:
function altitude_front_page_genesis_meta() {
if ( is_active_sidebar( ‘front-page-1’ ) || is_active_sidebar( ‘front-page-2’ ) || is_active_sidebar( ‘front-page-3’ ) || is_active_sidebar( ‘front-page-4’ ) || is_active_sidebar( ‘front-page-5’ ) || is_active_sidebar( ‘front-page-6’ ) || is_active_sidebar( ‘front-page-7’ ) || is_active_sidebar( ‘front-page-8’ ) || is_active_sidebar( ‘front-page-9’ ) ) {
//* Enqueue scripts
add_action( ‘wp_enqueue_scripts’, ‘altitude_enqueue_altitude_script’ );
function altitude_enqueue_altitude_script() {
wp_enqueue_script( ‘altitude-script’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/home.js’, array( ‘jquery’ ), ‘1.0.0’ );
wp_enqueue_script( ‘localScroll’, get_stylesheet_directory_uri() . ‘/js/jquery.localScroll.min.js’, array( ‘scrollTo’ ), ‘1.2.8b’, true );
wp_enqueue_script( ‘scrollTo’, get_stylesheet_directory_uri() . ‘/js/jquery.scrollTo.min.js’, array( ‘jquery’ ), ‘1.4.5-beta’, true );
if ( is_active_sidebar( ‘home-section-1’ ) ) {
// Enqueue BigVideo on non-handhelds
if ( wp_is_mobile() ) {
return;
}
wp_enqueue_script( ‘video-js’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/video.js’, ”, ”, true );
wp_enqueue_style( ‘bigvideo-css’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/css/bigvideo.css’ );
wp_enqueue_script( ‘bigvideo’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/bigvideo.js’, array( ‘video-js’, ‘jquery’ ), ”, true );
wp_enqueue_script( ‘bigvideo-init’, get_stylesheet_directory_uri() . ‘/js/bigvideo-init.js’, array( ‘bigvideo’ ), ‘1.0.0’, true );
}
}
//* Add front-page body class
add_filter( ‘body_class’, ‘altitude_body_class’ );
function altitude_body_class( $classes ) {
$classes[] = ‘front-page’;
return $classes;
}
//* Force full width content layout
add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ );
//* Remove breadcrumbs
remove_action( ‘genesis_before_loop’, ‘genesis_do_breadcrumbs’ );
//* Remove the default Genesis loop
remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );
//* Add homepage widgets
add_action( ‘genesis_loop’, ‘altitude_front_page_widgets’ );
//* Add featured-section body class
if ( is_active_sidebar( ‘front-page-1’ ) ) {
//* Add image-section-start body class
add_filter( ‘body_class’, ‘altitude_featured_body_class’ );
function altitude_featured_body_class( $classes ) {
$classes[] = ‘featured-section’;
return $classes;
}
}
}
}
I haven’t yet checked your code in front-page.php but the URLs to videos definitely need to be corrected.
Remove the
htmlfrom the URLs. They should be like this: http://v3.ankr.com/videos/ANKR_Commercial_2.mp4Thanks Sridhar, I corrected that and I can open the videos in the browser with those addresses but it still doesn’t seem to work. So close!
I’ve checked every bit of code and it all seems to be in the right place. The only thing I think I might be doing wrong is where in Altitude I’m calling for it?
This tutorial is amazing, thanks again!
Sridhar – I think I may have figured it out!
Altitude calls for front-page-1 instead of home-section-1!
Testing….
Well… that worked, sort of. It’s replacing the static image and playing something but I can only hear the audio, no video…
The files themselves do not seem to have any video. I do not see the video when I go to http://v3.ankr.com/videos/ANKR_Commercial_2.mp4 in browser. I hear only audio.
Hi Sridhar, thanks for writing this. I’ve got it working in Firefox and IE with Altitude Pro but it’s not functional in Chrome as all other images on the front page do not load correctly.
The ammended bigvideo-init.js looks like this:
jQuery(function( $ ){
var BV = new $.BigVideo({container: $(‘.front-page-1’), useFlashForFirefox:false, doLoop: true});
BV.init();
BV.show([
{ type: “video/mp4”, src: “http://staging.samucommunications.com/wp-content/uploads/2015/06/TypewriterBG_final.mp4” },
{ type: “video/webm”, src: “http://staging.samucommunications.com/wp-content/uploads/2015/06/TypewriterBG_final.webm” },
{ type: “video/ogg”, src: “http://staging.samucommunications.com/wp-content/uploads/2015/06/TypewriterBG_final.ogv” }
]);
// Fade in the video background after the video is fully loaded
BV.getPlayer().on(‘durationchange’,function(){
$(‘#big-video-wrap’).fadeIn();
});
});
and the front-page.php is as follows:
add_action( ‘genesis_meta’, ‘altitude_front_page_genesis_meta’ );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function altitude_front_page_genesis_meta() {
if ( is_active_sidebar( ‘front-page-1’ ) || is_active_sidebar( ‘front-page-2’ ) || is_active_sidebar( ‘front-page-3’ ) || is_active_sidebar( ‘front-page-4’ ) || is_active_sidebar( ‘front-page-5’ ) || is_active_sidebar( ‘front-page-6’ ) || is_active_sidebar( ‘front-page-7’ ) ) {
//* Enqueue scripts
add_action( ‘wp_enqueue_scripts’, ‘altitude_enqueue_altitude_script’ );
function altitude_enqueue_altitude_script() {
wp_enqueue_script( ‘altitude-script’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/home.js’, array( ‘jquery’ ), ‘1.0.0’ );
wp_enqueue_script( ‘localScroll’, get_stylesheet_directory_uri() . ‘/js/jquery.localScroll.min.js’, array( ‘scrollTo’ ), ‘1.2.8b’, true );
wp_enqueue_script( ‘scrollTo’, get_stylesheet_directory_uri() . ‘/js/jquery.scrollTo.min.js’, array( ‘jquery’ ), ‘1.4.5-beta’, true );
}
//* Add front-page body class
add_filter( ‘body_class’, ‘altitude_body_class’ );
function altitude_body_class( $classes ) {
$classes[] = ‘front-page’;
return $classes;
}
//* Force full width content layout
add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ );
//* Remove breadcrumbs
remove_action( ‘genesis_before_loop’, ‘genesis_do_breadcrumbs’ );
//* Remove the default Genesis loop
remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );
//* Add homepage widgets
add_action( ‘genesis_loop’, ‘altitude_front_page_widgets’ );
//* Add featured-section body class
if ( is_active_sidebar( ‘front-page-1’ ) ) {
//* Add image-section-start body class
add_filter( ‘body_class’, ‘altitude_featured_body_class’ );
function altitude_featured_body_class( $classes ) {
$classes[] = ‘featured-section’;
return $classes;
}
}
}
if ( is_active_sidebar( ‘front-page-1’ ) ) {
// Enqueue BigVideo on non-handhelds
if ( wp_is_mobile() ) {
return;
}
wp_enqueue_script( ‘video-js’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/video.js’, ”, ”, true );
wp_enqueue_style( ‘bigvideo-css’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/css/bigvideo.css’ );
wp_enqueue_script( ‘bigvideo’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/bigvideo.js’, array( ‘video-js’, ‘jquery’ ), ”, true );
wp_enqueue_script( ‘bigvideo-init’, get_stylesheet_directory_uri() . ‘/js/bigvideo-init.js’, array( ‘bigvideo’ ), ‘1.0.0’, true );
}
}
//* Add markup for front page widgets
Any help would be very much appreciated.
The Chrome issue was fixed using css: “background-attachment: inherit;” for the other widget areas but now the site is broken when viewing in mobile browsers as the background placeholder image does not display and instead the mp4 remains unplayed and unplayable. Switching off javascript in the browser settings on the handset will then display the correct static image.
Where can I see the problem? I went to http://staging.samucommunications.com/ but noticed that the video is not present any more.
Thanks for the reply Sridhar, I hope you mean that the video is not visible in mobile view as it all appears to be working with help from your Altitude Pro tutorial and some tweaks to the css. Video should appear as intended on the desktop version with mobile devices displaying the image instead.
I see the video now on desktop.
In iOS simulator when simulating iPhone 6, I see the image like this: http://d.pr/i/1lyN8
Hi Sridhar , I’ve managed to adapt this tutorial to work with Dynamik for Genesis , I changed the enque’s code , created directories in Dynamik Uploads folder for the JS and Video files and changed the target class in the init file …..etc etc and it works for me ….
But …. how do I implement the alternate image for mobiles ? In Dynamik I’m using a hook box to place the video , I have no background image specified as in parralax pro tutorial.
How would we place a title and some caption text over the video? ( similar to the video tutorial for genesis).
Would be great if you could offer some help with this , even a tutorial for dyanmik users to place this video anywhere using a hook box or custom widget area ?
Here you go: http://sridharkatakam.com/video-background-section-in-dynamik/
Thank you! Exactly what I needed and worked like a charm 🙂
http://bayareandw.org/new/
Hi Sridhar,
Thanks for this very clear and helpful tutorial. I have two questions:
The video works perfectly, except that it loops, instead of fading into the background jpg.
Also, that assigned image flashes for a second before the video starts. And with some reversed out code on the extreme left in Firefox (40.0). This also happens, without the code, in Chrome (44.0.2403) and Safari (7.1.8) (all on the mac).
Thanks for this site and your help.
Steve
Any ideas about these issues?
Especially the looping. The only variation that I made to your directions was use an image that wasn’t generated in Miro.
Thanks!
Video looping is the expected behaviour for this tutorial. If you wish the video to NOT loop, do not do step 3 and in bigvideo-init.js replace http://pastie.org/pastes/10387020/text with http://pastie.org/pastes/10387018/text.
Again, the expected behaviour – image appearing first followed by the video when it is loaded. How do you want this to work/be changed?
Can you show me a screenshot or screencast of this?
Hi Sridhar,
Thanks for that. Those adjustments worked and the video plays once, but shouldn’t it fade to the featured image, as per this in the css?
” /* Hide background video (will be faded in after it’s completely loaded via JS) */”
Now it fades to black: http://bayareandw.org/new/
And here’s a screen shot of the text on the left: http://d.pr/i/1kogs
Thanks!
Steve
Hi Sridhar,
Thanks for those adjustments. Now the video stops at the end, but fades to black.
http://bayareandw.org/new/
Doesn’t this css mean it fades to the background?
#big-video-wrap {display: none; /* Hide background video (will be faded in after it’s completely loaded via JS) */
background: #fff url(“http://bayareandw.org/new/wp-content/uploads/2_1600kids.jpg”) bottom center / cover ; position: absolute !important; text-align: left;}
And here’s a screenshot of the text on the left: http://d.pr/i/1kogs
Thanks!
How would I go about lying a transparent color overlay on top of the video? Seems like a simple task but with the absolute positioning and z-indexing this proves to be a difficult task.
Thanks in advance!
Add this in style.css: http://pastie.org/pastes/10387102/text
Wow, That worked! Thank you so much! Your the man and thanks for replying!
Thanks for this! It works perfectly … the only issue I am having is what Scaramia mentioned in a comment above. Just before the video starts to play, just for a split second the video is black with large white text down the left side listing the Current Time, Duration Time, etc. This is a bit jarring and I would love to get rid of it, even if it’s only by making the text black so it doesn’t show. Thoughts?
Hi Erin,
Can you provide the URL of the site?
Thanks for the reply! I will send you the login via your Contact form, as the site is currently password protected.
Is there any fix for this? Let me know if you didn’t receive the URL I sent via your Contact form.
I”m not sure if you got my message via your contact form? Anyway, I grabbed a screenshot of the site I’m developing for a client, in case this will help. Some of the other screenshots that have been posted int he comments of the thread don’t seem to be visible:
http://bit.ly/1KIqdXz
I see the same issue here, http://staging.samucommunications.com, mentioned by “scaramia” in his comment just below.
The issue seems to occur the first time the page loads, and then I don’t see it again until I clear my browser’s cache.
Thanks!
Hi Sridhar,
I’m seeing that flash of text on markusmunch’s site too: http://staging.samucommunications.com/.
Was that ever resolved? And that video also seems to loop endlessly as well.
Any help?
Steve
We still have code flashing on load in Firefox. Please do let us know if you work out a fix for this Sridhar, any ideas developing from Erin’s site?
Hi Sridhar,
I have the same issue as some people that commented about code flashing on load in Firefox. Also, this same code is permanently displayed on the screen over a static image when using the Back browser button to navigate back to the main page.
Here are the steps:
1. Load the main page that features a video
2. Navigate away from the front page to some other inner page
3. Then use the browser Back button to get back to the main page.
Result: the front page does not load a video and code is permanently displayed on a static image with the whole image section messed up at the bottom (horizontal white lines coming thru the section).
Is there a way to fix tis?
Just implemented this on a custom child theme. Thanks, Sridhar!
Hello – loaded the video and it’s off to the right…. http://unstemp.com/
Help?
…i’ve moved on to Workstation Pro. Would like to fade the video into the background. Autoplay but have no sound on load and/or show controls of video? searching forums, etc.
Hello,
I now recommend this free plugin for setting up background video (either for entire body element or a specific div): https://wordpress.org/plugins/video-background/
See https://sridharkatakam.com/background-video-front-page-1-section-atmosphere-pro/ for an example of using it in a Genesis child theme.
^ This last comment is a GREAT tip and worked for me on my custom child theme for client! Thanks Sridhar!
Hi, I love this but am wondering what I need to do to fill the entire page…how right now it cuts off and the second section is showing on page load. Also, there’s a big space in the top between the navigation and the video. Any ideas would be greatly appreciated!