https://www.curacaoliqueur.com/assets/frontend/curacaoliqueur/js/vendors/jquery.youtubebackground.js

1/*
2 * YoutubeBackground - A wrapper for the Youtube API - Great for fullscreen background videos or just regular videos.
3 *
4 * Licensed under the MIT license:
5 *   //www.opensource.org/licenses/mit-license.php
6 *
7 *
8 * Version:  1.0.1
9 *
10 */
11
12// Chain of Responsibility pattern. Creates base class that can be overridden.
13if (typeof Object.create !== "function") {
14  Object.create = function(obj) {
15    function F() {}
16    F.prototype = obj;
17    return new F();
18  };
19}
20
21(function($, window, document) {
22  var
23    loadAPI = function loadAPI(callback) {
24
25      // Load Youtube API
26      var tag = document.createElement('script'),
27      head = document.getElementsByTagName('head')[0];
28
29      tag.src = '//www.youtube.com/iframe_api';
30
31      head.appendChild(tag);
32
33      // Clean up Tags.
34      head = null;
35      tag = null;
36
37      iframeIsReady(callback);
38    },
39    iframeIsReady = function iframeIsReady(callback) {
40      // Listen for Gobal YT player callback
41      if (typeof YT === 'undefined' && typeof window.loadingPlayer === 'undefined') {
42        // Prevents Ready Event from being called twice
43        window.loadingPlayer = true;
44
45        
46        // Creates deferred so, other players know when to wait.
47        window.dfd = $.Deferred();
48        window.onYouTubeIframeAPIReady = function() {
49          window.onYouTubeIframeAPIReady = null;
50          window.dfd.resolve( "done" );
51          callback();
52        };
53      } else if (typeof YT === 'object')  {
54        callback();
55      } else {
56        window.dfd.done(function( name ) {
57          callback();
58        });
59      }
60    };
61
62  // YTPlayer Object
63  YTPlayer = {
64    player: null,
65
66    // Defaults
67    defaults: {
68      ratio: 16 / 9,
69      videoId: 'LSmgKRx5pBo',
70      mute: true,
71      repeat: true,
72      width: $(window).width(),
73      playButtonClass: 'YTPlayer-play',
74      pauseButtonClass: 'YTPlayer-pause',
75      muteButtonClass: 'YTPlayer-mute',
76      volumeUpClass: 'YTPlayer-volume-up',
77      volumeDownClass: 'YTPlayer-volume-down',
78      start: 0,
79      pauseOnScroll: false,
80      fitToBackground: true,
81      playerVars: {
82        modestbranding: 1,
83        autoplay: 1,
84        controls: 0,
85        showinfo: 0,
86        wmode: 'transparent',
87        branding: 0,
88        rel: 0,
89        autohide: 0
90      },
91      events: null
92    },
93
94    /**
95     * @function init
96     * Intializes YTPlayer object
97     */
98    init: function init(node, userOptions) {
99      var self = this;
100
101      self.userOptions = userOptions;
102
103      self.$body = $('body'),
104      self.$node = $(node),
105      self.$window = $(window);
106
107      // Setup event defaults with the reference to this
108      self.defaults.events = {
109        'onReady': function(e) {
110          self.onPlayerReady(e);
111
112          // setup up pause on scroll
113          if (self.options.pauseOnScroll) {
114            self.pauseOnScroll();
115          }
116
117          // Callback for when finished
118          if (typeof self.options.callback == 'function') {
119            self.options.callback.call(this);
120          }
121        },
122        'onStateChange': function(e) {
123          if (e.data === 1) {
124            self.$node.addClass('loaded');
125          } else if (e.data === 0 && self.options.repeat) { // video ended and repeat option is set true
126            self.player.seekTo(self.options.start);
127          }
128        }
129      }
130
131
132      self.options = $.extend(true, {}, self.defaults, self.userOptions);
133      self.options.height = Math.ceil(self.options.width / self.options.ratio);
134      self.ID = (new Date()).getTime();
135      self.holderID = 'YTPlayer-ID-' + self.ID;
136
137      if (self.options.fitToBackground) {
138        self.createBackgroundVideo();
139      } else {
140        self.createContainerVideo();
141      }
142      // Listen for Resize Event
143      self.$window.on('resize.YTplayer' + self.ID, function() {
144        self.resize(self);
145      });
146
147      loadAPI(self.onYouTubeIframeAPIReady.bind(self));
148
149      self.resize(self);
150
151      return self;
152    },
153
154
155    /**
156     * @function pauseOnScroll
157     * Adds window events to pause video on scroll.
158     */
159    pauseOnScroll: function pauseOnScroll() {
160      var self = this;
161      self.$window.on('scroll.YTplayer' + self.ID, function() {
162        var state = self.player.getPlayerState();
163        if (state === 1) {
164          self.player.pauseVideo();
165        }
166      });
167      self.$window.scrollStopped(function(){
168        var state = self.player.getPlayerState();
169        if (state === 2) {
170          self.player.playVideo();
171        }
172      });
173    },
174    /**
175     * @function createContainerVideo
176     * Adds HTML for video in a container
177     */
178    createContainerVideo: function createContainerVideo() {
179      var self = this;
180
181      /*jshint multistr: true */
182      var $YTPlayerString = $('<div id="ytplayer-container' + self.ID + '" >\
183                                    <div id="' + self.holderID + '" class="ytplayer-player"></div> \
184                                    </div> \
185                                    <div id="ytplayer-shield"></div>');
186
187      self.$node.append($YTPlayerString);
188      self.$YTPlayerString = $YTPlayerString;
189      $YTPlayerString = null;
190    },
191
192    /**

193     * @function createBackgroundVideo
194     * Adds HTML for video background
195     */
196    createBackgroundVideo: function createBackgroundVideo() {
197      /*jshint multistr: true */
198      var self = this,
199        $YTPlayerString = $('<div id="ytplayer-container' + self.ID + '" class="ytplayer-container background">\
200                                    <div id="' + self.holderID + '" class="ytplayer-player"></div>\
201                                    </div>\
202                                    <div id="ytplayer-shield"></div>');
203
204      self.$node.find('img').fadeOut();
205      self.$node.append($YTPlayerString);
206      self.$YTPlayerString = $YTPlayerString;
207      $YTPlayerString = null;
208    },
209
210    /**
211     * @function resize
212     * Resize event to change video size
213     */
214    resize: function resize(self) {
215      //var self = this;
216      var container = $(window);
217
218      if (!self.options.fitToBackground) {
219        container = self.$node;
220      }
221
222      var width = container.width(),
223        pWidth, // player width, to be defined
224        height = container.height(),
225        pHeight, // player height, tbd
226        $YTPlayerPlayer = $('#' + self.holderID);
227
228      // when screen aspect ratio differs from video, video must center and underlay one dimension
229      if (width / self.options.ratio < height) {
230        pWidth = Math.ceil(height * self.options.ratio); // get new player width
231        $YTPlayerPlayer.width(pWidth).height(height).css({
232          left: (width - pWidth) / 2,
233          top: 0
234        }); // player width is greater, offset left; reset top
235      } else { // new video width < window width (gap to right)
236        pHeight = Math.ceil(width / self.options.ratio); // get new player height
237        $YTPlayerPlayer.width(width).height(pHeight).css({
238          left: 0,
239          top: 0
240        }); // player height is greater, offset top; reset left
241      }
242
243      $YTPlayerPlayer = null;
244      container = null;
245    },
246
247    /**
248     * @function onYouTubeIframeAPIReady
249     * @ params {object} YTPlayer object for access to options
250     * Youtube API calls this function when the player is ready.
251     */
252    onYouTubeIframeAPIReady: function onYouTubeIframeAPIReady() {
253      var self = this;
254      self.player = new window.YT.Player(self.holderID, self.options);  
255    },
256
257    /**
258     * @function onPlayerReady
259     * @ params {event} window event from youtube player
260     */
261    onPlayerReady: function onPlayerReady(e) {
262      if (this.options.mute) {
263        e.target.mute();
264      }
265      e.target.playVideo();
266    },
267
268    /**
269     * @function getPlayer
270     * returns youtube player
271     */
272    getPlayer: function getPlayer() {
273      return this.player;
274    },
275
276    /**
277     * @function destroy
278     * destroys all!
279     */
280    destroy: function destroy() {
281      var self = this;
282
283      self.$node
284        .removeData('yt-init')
285        .removeData('ytPlayer')
286        .removeClass('loaded');
287
288      self.$YTPlayerString.remove();
289
290      $(window).off('resize.YTplayer' + self.ID);
291      $(window).off('scroll.YTplayer' + self.ID);
292      self.$body = null;
293      self.$node = null;
294      self.$YTPlayerString = null;
295      self.player.destroy();
296      self.player = null;
297    }
298  };
299
300  // Scroll Stopped event.
301  $.fn.scrollStopped = function(callback) {
302    var $this = $(this), self = this;
303    $this.scroll(function(){
304      if ($this.data('scrollTimeout')) {
305        clearTimeout($this.data('scrollTimeout'));
306      }
307      $this.data('scrollTimeout', setTimeout(callback,250,self));
308    });
309  };
310
311  // Create plugin
312  $.fn.YTPlayer = function(options) {
313
314    return this.each(function() {
315      var el = this;
316
317      $(el).data("yt-init", true);
318      var player = Object.create(YTPlayer);
319      player.init(el, options);
320      $.data(el, "ytPlayer", player);
321    });
322  };
323
324})(jQuery, window, document);