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

YouTube in-view auto-play plugin

This plugin is using https://github.com/protonet/jquery.inview and YouTube Iframe API 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 <div> elements with data attributes, e.g:

<div class="youtube-video" 
     id="menorca-faro-de-favarix" 
     data-video-id="o2Fs6SoRHCk" 
     width="1000" 
     height="563"></div>

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

<script type="text/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'
    });
  }
</script>

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

jquery.youtube-inview-autoplay's Issues

It's not work on iOS

Hi, thanks for great plugin. I can run it on android device, but it can't run on iOS device. Does anyone have a solution for me?

iPad bug?

Hi,

This is a really helpful plugin, though I've noticed a problem when testing on iPad – the video starts to load then appears to get stuck in a preload cycle and the video never autoplays (tested on your Menorca demo page – as it happens, I used to live in Menorca and got some good memories for your pictures, thanks!).

I tested using iOS 9.3.5.

Thanks,
Matt