├── bower.json
├── LICENSE
├── README.md
└── jquery.youtube-inview-autoplay.js


/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery.youtube-inview-autoplay",
 3 |   "version": "1.0.0",
 4 |   "main": "jquery.youtube-inview-autoplay.js",
 5 |   "description": "A jQuery plugin that starts playing YouTube video when it's scrolled into the view and stops it when it's scrolled out",
 6 |   "ignore": [
 7 |     "README.md",
 8 |     "bower.json"
 9 |   ],
10 |   "dependencies": {
11 |     "jquery": "latest",
12 |     "protonet/jquery.inview": "1.1.2"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Anatoliy Yastreb
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # YouTube in-view auto-play plugin
 2 | 
 3 | This plugin is using https://github.com/protonet/jquery.inview and [YouTube Iframe API](https://developers.google.com/youtube/iframe_api_reference) to setup multiple embeded YouTube players and starts playing them once the player is scrolled in browser view.
 4 | 
 5 | * **Author:** Anatoliy Yastreb
 6 | * **Live Demo:** https://11route.com/en/menorca-spain
 7 | * **Requires:** jQuery 1.8+
 8 | 
 9 | ## Usage
10 | 
11 | In page markup videos can be stored as `<div>` elements with data attributes, e.g:
12 | ```html
13 | <div class="youtube-video" 
14 |      id="menorca-faro-de-favarix" 
15 |      data-video-id="o2Fs6SoRHCk" 
16 |      width="1000" 
17 |      height="563"></div>
18 | ```
19 | First, you need to load YouTube API. Then you need to apply plugin to all video elements:
20 | ```javascript
21 | <script type="text/javascript">
22 |   // Load the IFrame Player API code asynchronously.
23 |   var tag = document.createElement('script');
24 |   tag.src = "https://www.youtube.com/player_api";
25 |   var firstScriptTag = document.getElementsByTagName('script')[0];
26 |   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
27 | 
28 |   function onYouTubeIframeAPIReady() {
29 |     $('.youtube-video').inViewAutoplay({
30 |       autohide: 1,
31 |       modestbranding: 1,
32 |       rel: 0,
33 |       quality: 'hd720'
34 |     });
35 |   }
36 | </script>
37 | ```
38 | 
39 | In plugin call you can pass player parameters object, for a list of supported parameters see: https://developers.google.com/youtube/player_parameters#Parameters
40 | 


--------------------------------------------------------------------------------
/jquery.youtube-inview-autoplay.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Create YouTube players from <div> placeholders with IFrame API.
 3 |  * Each <div> must have id, width, height and data-video-id attributes to init the player.
 4 |  * Start playing the video when iframe is scrolled into view.
 5 |  * Pause playing when it is scrolled out of view.
 6 |  *
 7 |  * Depends on https://github.com/protonet/jquery.inview
 8 |  */
 9 | ;(function ($) {
10 |     $.fn.inViewAutoplay = function (options) {
11 |         return this.filter('[id][width][height][data-video-id]').each(function () {
12 |             new YT.Player(this.getAttribute('id'), {
13 |                 width: this.getAttribute('width'),
14 |                 height: this.getAttribute('height'),
15 |                 videoId: this.getAttribute('data-video-id'),
16 |                 playerVars: options,
17 |                 events: {
18 |                     'onReady': onPlayerReady
19 |                 }
20 |             });
21 | 
22 |             function onPlayerReady(event) {
23 |                 var player = event.target;
24 | 
25 |                 $(player.getIframe()).bind('inview', {player: player}, onPlayerInView);
26 | 
27 |                 if (options.quality) {
28 |                     player.setPlaybackQuality(options.quality);
29 |                 }
30 |             }
31 | 
32 |             function onPlayerInView(event, visible) {
33 |                 if (visible == true) {
34 |                     event.data.player.playVideo();
35 |                 } else {
36 |                     event.data.player.pauseVideo();
37 |                 }
38 |             }
39 |         });
40 |     };
41 | 
42 | })(window.jQuery || window.Zepto);
43 | 


--------------------------------------------------------------------------------