jQuery Plugin To Play / Stop Youtube Videos On Page Scroll
File Size: | 7.81 KB |
---|---|
Views Total: | 45110 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.