davestacey
7/6/2015 - 2:34 AM

Youtube fullscreen in Drupal

Youtube fullscreen in Drupal

 /*******************************************
  Add this to Template TPL...
          <div id='videoPlayerWrapper'>
          <!-- <div id="player"></div> -->
          <iframe id="ytplayer1" type="text/html" width="1280" height="400" src="http://www.youtube.com/embed/s9ItuOFvSiI?controls=0&autoplay=1&loop=1&playlist=s9ItuOFvSiI&iv_load_policy=3&rel=0&showinfo=0&enablejsapi=1&autohide=1&modestbranding=1&fs=0&disablekb=1&color=white&theme=light" 
            frameborder="0" allowfullscreen></iframe>
        </div>
  *******************************************/
  
(function ($, Drupal) {
  
  /*******************************************
  Set namespaced functions as non global variables, 
  keep the global scope clear to reduce naming clashes and keep memory usage down
  jQuery 1.5 or higher.
  *******************************************/
  var nshome = nshome || {};
 
  nshome.player = {};
  nshome.vid = [
     {'videoId': 's9ItuOFvSiI', 'startSeconds': 1, 'endSeconds': 65, 'suggestedQuality': 'hd720'} // longer 4 repeats
    // {'videoId': '2b5QNj-BVhs', 'startSeconds': 515, 'endSeconds': 525, 'suggestedQuality': 'hd720'}, // sample snowboard video
  ];
 
  /*******************************************
  Run prep functions before doc loaded
  *******************************************/
 
  /**
   * Run the functions in Drupal
   */
  Drupal.behaviors.es_fnd = {
    attach: function(context, settings) {
      // Check for Front-Page
      if (window.location.href.indexOf() === -1) {
        // console.log('FRONT PAGE IS TRUE');
         function onYouTubeIframeAPIReady() {
          // console.log('onYouTubeIframeAPIReady YT=', YT);
          if (YT.loaded ===1 ) {
            nshome.player = new YT.Player('ytplayer1', {
              // height: '400',
              // width: '1280',
              // playerVars: nshome.playerDefaults,
              // debugger;
              events: {
                'onReady': onPlayerReady, 
                'onStateChange': onPlayerStateChange,
                'onError': onPlayerError
              }
            });
          }
        } //onYouTubeIframeAPIReady
        // console.log('nshome.vid.length =', nshome.vid.length );
 
        var randomvid = Math.floor(Math.random() * (nshome.vid.length - 1 + 1));
        // console.log('onPlayerReady', randomvid);
 
         // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
          // console.log('onPlayerReady', event );
          $('#ytplayer1').removeClass('fadein'); // be safe
          $('#ytplayer1').addClass('fadeout'); // hide until the player has loaded
 
          // $('#player').addClass('html5-stop-propagation'); // keep clicks from pausing video
 
          nshome.player.loadVideoById(nshome.vid[randomvid]);
          // nshome.player.mute();
          //event.target.setVolume(0);
        }
 
        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        function onPlayerStateChange(event) {
          var state1 = event.target.getPlayerState();
          // -1 – unstarted
          // 0 – ended
          // 1 – playing
          // 2 – paused
          // 3 – buffering
          // 5 – video cued
          if (event.data === 1){
            // console.log('The video is playing');
            $('#ytplayer1').addClass('fadein');
            $('#ytplayer1').removeClass('fadeout');
            var duration1 = nshome.player.getDuration();
            //duration1 65.921087
            // console.log('duration1', duration1);
          } else if (event.data === 3){
            // console.log("The video is buffering");
            $('#ytplayer1').removeClass('fadein');
            $('#ytplayer1').addClass('fadeout');
          } else if (event.data === 0){
            // console.log("The video has finished!");
            // Start over
            // $('#ytplayer1').addClass('hide');
            // $('#ytplayer1').removeClass('active');
            nshome.player.seekTo(nshome.vid[0].startSeconds)
            // nshome.player.seekTo(nshome.vid[randomvid].startSeconds)
          } else if (event.data === null){
            // console.log('event data ===null - Issue loading video ');
            $('#ytplayer1').removeClass('fadein');
            $('#ytplayer1').addClass('fadeout');
          }
        }
        function onPlayerError(event) {
          // console.log('onPlayerError');
          // nshome.player.stopVideo();
        }
        function stopVideo() {
          // console.log('onPlayerError');
          // nshome.player.stopVideo();
        }
 
        function vidRescale(){
          var w = $(window).width()+200,
          h = $(window).height()+200;
            //divide largest number ( width) by 16, and then multiply the answer by 9 to get hieght.
            //or x the height by 1.78
          nshome.player.setSize(w, w/16*9);
          // if (w/h > 16/9){
          //   // usually false, it is less than 1.7
          //   // nshome.player.setSize(w, w/16*9);
          //   // $('#ytplayer1 .screen').css({'left': '0px'});
          // } else {
          //   // nshome.player.setSize(h/9*16, h);
          //   // $('#ytplayer1 .screen').css({'left': -($('.tv .screen').outerWidth()-w)/2});
          // }
        }
 
        $(window).on('load resize', function(){
          vidRescale();
        });
 
        // Trigger it all
        $.getScript("https://www.youtube.com/iframe_api", onYouTubeIframeAPIReady);
        //end YouTubeAPI

      } // end if window.location.href.indexOf()
 
    } //attach: function(
  }; //Drupal.behaviors.e
})(jQuery, Drupal);