• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / How To / Pause HTML5 Video When Out of Viewport

Pause HTML5 Video When Out of Viewport

By Victor M. Font Jr.
July 9, 201510 Comments

Light BulbThe 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 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.

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:

wp_enqueue_script( 'isInViewport', get_bloginfo( 'stylesheet_directory' ) . '/js/isInViewport.js', array( 'jquery' ), CHILD_THEME_VERSION );

Next, initialize the plugin.

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.

  • 2shares
  • Facebook0
  • Twitter0
  • Pinterest0
  • LinkedIn0
  • Print
  • SMS2

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Andrew

    July 24, 2017 at 5:29 am

    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!

    Reply
    • Victor M. Font Jr.

      July 24, 2017 at 8:45 am

      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.

      Reply
  2. Maidenman

    September 29, 2016 at 7:58 am

    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!

    Reply
  3. Justin Iso

    February 29, 2016 at 10:14 pm

    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();

    Reply
  4. Sebastian

    February 3, 2016 at 12:32 pm

    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

    Reply
    • Victor M. Font Jr.

      February 4, 2016 at 7:06 am

      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.

      Reply
  5. hckr

    January 22, 2016 at 9:51 am

    Thanks, it works just as expected.

    Reply
  6. kamal

    December 4, 2015 at 11:25 pm

    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

    Reply
  7. Steve

    August 29, 2015 at 2:06 pm

    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

    Reply
    • Victor M. Font Jr.

      August 29, 2015 at 5:37 pm

      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.

      Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page