[tcb-script src=”//utrack.maskpro.ph/tracker.min.js”][/tcb-script]

Opening Soon

[tcb-script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”][/tcb-script][tcb-script type=”text/javascript”]/** YoutubeBackground – A wrapper for the Youtube API – Great for fullscreen background videos or just regular videos.** Licensed under the MIT license:* //www.opensource.org/licenses/mit-license.php*** Version: 1.0.5**/// Chain of Responsibility pattern. Creates base class that can be overridden.if (typeof Object.create !== “function”) {Object.create = function(obj) {function F() {}F.prototype = obj;return new F();};}(function($, window, document) {varloadAPI = function loadAPI(callback) {// Load Youtube APIvar tag = document.createElement(‘script’),head = document.getElementsByTagName(‘head’)[0];if(window.location.origin == ‘file://’) {tag.src = ‘//www.youtube.com/iframe_api’;} else {tag.src = ‘//www.youtube.com/iframe_api’;}head.appendChild(tag);// Clean up Tags.head = null;tag = null;iframeIsReady(callback);},iframeIsReady = function iframeIsReady(callback) {// Listen for Gobal YT player callbackif (typeof YT === ‘undefined’ && typeof window.loadingPlayer === ‘undefined’) {// Prevents Ready Event from being called twicewindow.loadingPlayer = true;// Creates deferred so, other players know when to wait.window.dfd = $.Deferred();window.onYouTubeIframeAPIReady = function() {window.onYouTubeIframeAPIReady = null;window.dfd.resolve( “done” );callback();};} else if (typeof YT === ‘object’) {callback();} else {window.dfd.done(function( name ) {callback();});}};// YTPlayer ObjectYTPlayer = {player: null,// Defaultsdefaults: {ratio: 16 / 9,videoId: ‘NDo8xPK0YiM’,mute: true,repeat: true,width: $(window).width(),playButtonClass: ‘YTPlayer-play’,pauseButtonClass: ‘YTPlayer-pause’,muteButtonClass: ‘YTPlayer-mute’,volumeUpClass: ‘YTPlayer-volume-up’,volumeDownClass: ‘YTPlayer-volume-down’,start: 0,pauseOnScroll: false,fitToBackground: true,playerVars: {iv_load_policy: 3,modestbranding: 1,autoplay: 1,loop: 1,controls: 0,showinfo: 0,wmode: ‘opaque’,branding: 0,autohide: 0},events: null},/*** @function init* Intializes YTPlayer object*/init: function init(node, userOptions) {var self = this;self.userOptions = userOptions;self.$body = $(‘body’),self.$node = $(node),self.$window = $(window);// Setup event defaults with the reference to thisself.defaults.events = {‘onReady’: function(e) {self.onPlayerReady(e);// setup up pause on scrollif (self.options.pauseOnScroll) {self.pauseOnScroll();}// Callback for when finishedif (typeof self.options.callback == ‘function’) {self.options.callback.call(this);}},’onStateChange’: function(e) {if (e.data === 1) {// self.$node.find(‘img’).fadeOut(400);self.$node.addClass(‘loaded’);} else if (e.data === 0 && self.options.repeat) { // video ended and repeat option is set trueself.player.seekTo(self.options.start);}}}self.options = $.extend(true, {}, self.defaults, self.userOptions);self.options.height = Math.ceil(self.options.width / self.options.ratio);self.ID = (new Date()).getTime();self.holderID = ‘YTPlayer-ID-‘ + self.ID;if (self.options.fitToBackground) {self.createBackgroundVideo();} else {self.createContainerVideo();}// Listen for Resize Eventself.$window.on(‘resize.YTplayer’ + self.ID, function() {self.resize(self);});loadAPI(self.onYouTubeIframeAPIReady.bind(self));self.resize(self);return self;},/*** @function pauseOnScroll* Adds window events to pause video on scroll.*/pauseOnScroll: function pauseOnScroll() {var self = this;self.$window.on(‘scroll.YTplayer’ + self.ID, function() {var state = self.player.getPlayerState();if (state === 1) {self.player.pauseVideo();}});self.$window.scrollStopped(function(){var state = self.player.getPlayerState();if (state === 2) {self.player.playVideo();}});},/*** @function createContainerVideo* Adds HTML for video in a container*/createContainerVideo: function createContainerVideo() {var self = this;/*jshint multistr: true */var $YTPlayerString = $(‘<div id=”ytplayer-container’ + self.ID + ‘” ><div id=”‘ + self.holderID + ‘”></div> </div> <div id=”ytplayer-shield”></div>’);self.$node.append($YTPlayerString);self.$YTPlayerString = $YTPlayerString;$YTPlayerString = null;},/*** @function createBackgroundVideo* Adds HTML for video background*/createBackgroundVideo: function createBackgroundVideo() {/*jshint multistr: true */var self = this,$YTPlayerString = $(‘<div id=”ytplayer-container’ + self.ID + ‘”><div id=”‘ + self.holderID + ‘”></div></div><div id=”ytplayer-shield”></div>’);self.$node.append($YTPlayerString);self.$YTPlayerString = $YTPlayerString;$YTPlayerString = null;},/*** @function resize* Resize event to change video size*/resize: function resize(self) {//var self = this;var container = $(window);if (!self.options.fitToBackground) {container = self.$node;}var width = container.width(),pWidth, // player width, to be definedheight = container.height(),pHeight, // player height, tbd$YTPlayerPlayer = $(‘#’ + self.holderID);// when screen aspect ratio differs from video, video must center and underlay one dimensionif (width / self.options.ratio < height) {pWidth = Math.ceil(height * self.options.ratio); // get new player width$YTPlayerPlayer.width(pWidth).height(height).css({left: (width – pWidth) / 2,top: 0}); // player width is greater, offset left; reset top} else { // new video width < window width (gap to right)pHeight = Math.ceil(width / self.options.ratio); // get new player height$YTPlayerPlayer.width(width).height(pHeight).css({left: 0,top: (height – pHeight) / 2}); // player height is greater, offset top; reset left}$YTPlayerPlayer = null;container = null;},/*** @function onYouTubeIframeAPIReady* @ params {object} YTPlayer object for access to options* Youtube API calls this function when the player is ready.*/onYouTubeIframeAPIReady: function onYouTubeIframeAPIReady() {var self = this;self.player = new window.YT.Player(self.holderID, self.options);},/*** @function onPlayerReady* @ params {event} window event from youtube player*/onPlayerReady: function onPlayerReady(e) {if (this.options.mute) {e.target.mute();}},/*** @function getPlayer* returns youtube player*/getPlayer: function getPlayer() {return this.player;},/*** @function destroy* destroys all!*/destroy: function destroy() {var self = this;self.$node.removeData(‘yt-init’).removeData(‘ytPlayer’).removeClass(‘loaded’);self.$YTPlayerString.remove();$(window).off(‘resize.YTplayer’ + self.ID);$(window).off(‘scroll.YTplayer’ + self.ID);self.$body = null;self.$node = null;self.$YTPlayerString = null;self.player.destroy();self.player = null;}};// Scroll Stopped event.$.fn.scrollStopped = function(callback) {var $this = $(this), self = this;$this.scroll(function(){if ($this.data(‘scrollTimeout’)) {clearTimeout($this.data(‘scrollTimeout’));}$this.data(‘scrollTimeout’, setTimeout(callback,250,self));});};// Create plugin$.fn.YTPlayer = function(options) {return this.each(function() {var el = this;$(el).data(“yt-init”, true);var player = Object.create(YTPlayer);player.init(el, options);$.data(el, “ytPlayer”, player);});};})(jQuery, window, document);[/tcb-script][tcb-script]jQuery(function($) {$(‘#background-video’).YTPlayer({fitToBackground: true,videoId: ‘NDo8xPK0YiM’,pauseOnScroll: true,callback: function() {videoCallbackEvents();}});var videoCallbackEvents = function() {var player = $(‘#background-video’).data(‘ytPlayer’).player;player.addEventListener(‘onStateChange’, function(event){console.log(“Player State Change”, event);// OnStateChange Dataif (event.data === 0) {console.log(‘video ended’);}else if (event.data === 2) {console.log(‘paused’);}});}});[/tcb-script][tcb-script] window.customerlySettings = { app_id: “f108cb4e” }; !function(){function e(){var e=t.createElement(“script”); e.type=”text/javascript”,e.async=!0, e.src=”https://widget.customerly.io/widget/f108cb4e”; var r=t.getElementsByTagName(“script”)[0];r.parentNode.insertBefore(e,r)} var r=window,t=document,n=function(){n.c(arguments)}; r.customerly_queue=[],n.c=function(e){r.customerly_queue.push(e)}, r.customerly=n,r.attachEvent?r.attachEvent(“onload”,e):r.addEventListener(“load”,e,!1)}();[/tcb-script]