The owners of Houseplan Works gave us the requirement of adding a HTML5 video of a swinging lightbulb to a section of the home page in the Genesis Parallax Pro theme. Adding the HTML5 video is no big deal. WordPress does provide the [video] shortcode. However, in this case, I opted to natively display the video using the HTML5 <video> tag.
The Problem while Testing
The problem that arose is that when I was testing the site on Firefox, Chrome, and Safari all at the same time, the MacBook Pro's cooling fans would spin up, memory pressure increased substantially, and the machine would eventually reboot itself. This led me to believe that one or more of these browsers have a memory leak when playing HTML5 videos. I suspect it's probably Firefox, because the same behavior occurs even if the other browsers are not running. It happens a little more slowly, but it still happens.
|
1 2 3 4 5 6 7 |
<div class="light-bulb"> <video width="280" height="380" autoplay="autoplay" preload="auto" loop> <source src="http://fakeurl/lightbulb.mp4" type="video/mp4" /> <source src="http://fakeurl/lightbulb.webm" type="video/webm" /> <source src="http://fakeurl/lightbulb.ogv" type="video/ogg" /> </video> </div> |
The Challenge
The only time I really ever need the video to play is when a user scrolls to the section of the page where the video is located. I modified the Genesis Parallax Pro theme to include seven panels with “snap-to” functionality. The theme as supplied has five panels without the snap-to feature. The challenge then is how do I play the video only when it is visible in the viewport?
The Response
The answer is a lot easier than I initially thought. The first part is to download the jQuery isInViewport plugin, install it in your child theme's directory structure, enqueue it in your theme's functions.php file, and finally, initialize it:
|
1 |
wp_enqueue_script( 'isInViewport', get_bloginfo( 'stylesheet_directory' ) . '/js/isInViewport.js', array( 'jquery' ), CHILD_THEME_VERSION ); |
Next, initialize the plugin.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
jQuery(document).ready(function ($) { "use strict"; /* activate pause for lightbulb video if scrolled out of viewport */ $(window).scroll(function() { $('video').each(function(){ if ($(this).is(":in-viewport( 400 )")) { $(this)[0].play(); } else { $(this)[0].pause(); } }); }); }); |
Well, that's it! I told you it would be easy.
Ok I give up, I know I am a total noob…
Step 0: isInViewport.js copied to the theme JS folder
Step 1: Enqueue isInViewport script in functions.php
Step 2: Initialize the isInViewport plugin -> added to my themes header section (which cause to my theme that gives and additional space on top of the site. Don’t know why.
Step 3: Tried to insert different ways some YouTube videos with [video] or even iframe method. Video displays nicely, but no autorun.
I know I do it something really wrong here, so please be patient. 🙂 What am i missing here?
Thank you!
The jQuery plugin as demonstrated in the post, only works if you use the HTML5 video element. It won’t work on iFrames because iFrame content is out of reach to the main page. I never tried it with YouTube videos, but I don’t see why it wouldn’t work as long as it’s not embedded in an iFrame. Make sure you’ve chosen the correct element as the jQuery selector in the initialization routine:
$(‘video’).each(function()
Instead of ‘video’, use your selector.
Thank you for this article, script works great! But I have a small problem: when video i finished it stops at last frame (which is perfect), but when I scroll my mouse even a tiny bit then video starts playing again (because it’s still in viewport).
How to modify the script so video stay at last frame forever until page refresh? I want to play the video in viewport just once, even if I scroll down to the bottom of the page and scroll back to top.
Thanks for help!
Cool tip! A minor point but rather than:
$(this)[0].play();
this is a bit more readable and slightly less (though basically negligible) overhead:
this.play();
Hello Victor,
First, thank you for your pretty good guide. But I’m not sure what I´ve done wrong.
I insert the sourcecode in the header, but it doesn’t work for me. No error or something. Have I to add a video ID at the tag “$(‘video’)” or will the script stop every video in my page which is out of view?
Thanks for any help!
Sebastian
Hi Sebastian,
Thanks for your question. The jQuery script is looking for the native HTML5 video tag when it scrolls into the viewport. Assuming you’ve enqueued the isInViewport.js file coorectly, this should work for all videos on the page that are using the native HTML5 video tag. If you are inserting the videos some other way than the native HTML5 video tag, for example with a shortcode or the WordPress embed feature, you’ll have to provide the jQuery script with a different trigger.
Thanks, it works just as expected.
Hi Victor,
Auto video stop code worked well for me. it saved my time I was looking for solution to auto stop video when the video is not in view port tried many other codes but none of them worked well for me.
Thanks
Hi Victor,
I tried this method, but I got a php error message. I’m trying to stop the video from looping.
This is unclear to me: “install it in your child theme’s directory structure”. I placed it in my child theme’s js folder. It that correct?
Thanks for any help!
Steve
Hello Steve,
That phrase means install the jQuery file in any directory in you child theme. Installing it the js file is perfectly fine. That’s I put mine. The important thing is enqueuing it properly in your functions.php.
Also, I just realized that the last step, initializing the jQuery, may not be clear. That should be wrapped in a script tag and placed in the header of the page on which the video is displayed.