youtube-play-when-visible.js

youtube-play-when-visible.js

/*

This code will autostart a youtube when visible and stop when not. You could alternatively purchase plugin ARVE pro.

Caveits:
 - Only currently works with one video right now
 - Depends on jQuery

Usage: Add this anywhere
<div class="youtube-smartstart-iframe" data-youtube-id="vfuLDmGbqTI"></div>

*/

// Add Responsive Container CSS
$('head').append('<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>');

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



var iframe_selector = '.youtube-smartstart-iframe';

// Make iframe responsive
$(iframe_selector).each(function() {
  $(this).wrap("<div class='embed-container'></div>");
});

var smartplayer_count = 0;
var ytelements = [];
function onYouTubeIframeAPIReady() {
  $(iframe_selector).each(function() {

    var youtube_id = $(this).attr('data-youtube-id');

    // Add an id for youtube api to use
    var iframe_id = 'youtube-smartstart-iframe-' + smartplayer_count++;
    $(this).attr('id', iframe_id);

    $(this)[0].onPlayerReady = function() {
      console.log(iframe_id + " youtube jsplayer ready");
      //do whatever you want here. Like, player.playVideo();
    }

    $(this)[0].onPlayerStateChange = function() {
      console.log(iframe_id + "youtube jsplace state changed");
    }

    $(this)[0].ytplayer = new YT.Player(iframe_id, {
      videoId: youtube_id, // YouTube Video ID
      width: 560,               // Player width (in px)
      height: 316,              // Player height (in px)
      playerVars: {
        autoplay: 0,        // Auto-play the video on load
        controls: 1,        // Show pause/play buttons in player
        showinfo: 1,        // Hide the video title
        modestbranding: 1,  // Hide the Youtube Logo
        loop: 0,            // Run the video in a loop
        fs: 0,              // Hide the full screen button
        cc_load_policy: 1, // Hide closed captions
        iv_load_policy: 3,  // Hide the Video Annotations
        autohide: 1         // Hide video controls when playing
      },
      events: {
        'onReady': $(this)[0].onPlayerReady,
        'onStateChange': $(this)[0].onPlayerStateChange
      }
    });

    // console.dir($(this)[0].ytplayer);

    ytelements.push($(this));



  });
}

// Auto-play video if visible
setInterval(function() {
  $.each(ytelements, function(i,e) {
    if( $('#'+e.attr('id')).is(':visible')) {
      if (e[0].ytplayer.getPlayerState() == 5) {
        e[0].ytplayer.playVideo();
      }
    } else {
      if (e[0].ytplayer.getPlayerState() == 1) {
        e[0].ytplayer.stopVideo();
      }
    }
  });
}, 200);