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);