https://github.com/ayastreb/jquery.youtube-inview-autoplay

:tv: A jQuery plugin that starts playing YouTube video when it's scrolled into the view and stops it when it's scrolled out
https://github.com/ayastreb/jquery.youtube-inview-autoplay

jquery-plugin youtube youtube-autoplay

Last synced: 3 months ago
JSON representation

:tv: A jQuery plugin that starts playing YouTube video when it's scrolled into the view and stops it when it's scrolled out

• Host: GitHub
• URL: https://github.com/ayastreb/jquery.youtube-inview-autoplay
• Owner: ayastreb
• License: mit
• Created: 2016-06-14T10:50:30.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-06-14T11:49:34.000Z (over 8 years ago)
• Last Synced: 2024-09-28T19:02:13.190Z (3 months ago)
• Topics: jquery-plugin, youtube, youtube-autoplay
• Language: JavaScript
• Homepage:
• Size: 3.91 KB
• Stars: 14
• Watchers: 4
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# YouTube in-view auto-play plugin

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.

* **Author:** Anatoliy Yastreb

* **Live Demo:** https://11route.com/en/menorca-spain

* **Requires:** jQuery 1.8+

## Usage

In page markup videos can be stored as `
` elements with data attributes, e.g:

```html



```

First, you need to load YouTube API. Then you need to apply plugin to all video elements:

```javascript


  // Load the IFrame Player API code asynchronously.

  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/player_api";

  var firstScriptTag = document.getElementsByTagName('script')[0];

  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onYouTubeIframeAPIReady() {

    $('.youtube-video').inViewAutoplay({

      autohide: 1,

      modestbranding: 1,

      rel: 0,

      quality: 'hd720'

    });

  }

```

In plugin call you can pass player parameters object, for a list of supported parameters see: https://developers.google.com/youtube/player_parameters#Parameters