jQuery Plugin To Play / Stop Youtube Videos On Page Scroll

YouTube Inview Autoplay is a jQuery plugin which automatically plays / stops Youtube videos when they become visible and disappear on vertical page scrolling.

Features:

• Requires jQuery inView Plugin and Youtube IFrame player API.
• Start playing the video when iframe is scrolled into view.
• Pause playing when it is scrolled out of view.

See also:

• Lightweight jQuery Youtube Video Lazy Load Plugin - LazyYT.js
• Lightweight jQuery Plugin To Lazy Load Youtube Videos - Lazy Loader

How to use it:

1. Load the necessary jQuery and jQuery inView plugin in the webpage.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="jquery.inview.min.js"></script>

2. Download and load the jquery.youtube-inview-autoplay.js script after jQuery.

<script src="jquery.youtube-inview-autoplay.js"></script>

3. Create YouTube players from div placeholders with IFrame API. Each div must have id, width, height and data-video-id attributes to init the player.

<div class="youtube-video" 
     id="demo-1" 
     data-video-id="ptJWKnQmPWI" 
     width="560" 
     height="315"></div>
</div>

4. Load the IFrame Player API code asynchronously.

var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

5. Initialize the plugin and pass the player parameters as an object to inViewAutoplay().

function onYouTubeIframeAPIReady() {
  $('.youtube-video').inViewAutoplay({
    autohide: 1,
    modestbranding: 1,
    rel: 0,
    quality: 'hd720'
  });
}

---

This awesome jQuery plugin is developed by ayastreb. For more Advanced Usages, please check the demo page or visit the official website.