(function() { "use strict"; window.SCAPE = window.SCAPE || {}; var $ = jQuery.noConflict(); SCAPE.videoBg = { init: function() { SCAPE.videoBg.vimeoInit(); SCAPE.videoBg.videoSelfhosted(); $('.wtbx_bg_youtube').each(function() { SCAPE.videoBg.youtubeInit($(this)); }); $(window).resize(function() { SCAPE.waitForFinalEvent( function() { SCAPE.videoBg.videoSize(); }, SCAPE.timeToWaitForLast, 'video_bg'); }); }, vimeoInit: function() { $('.wtbx_bg_vimeo').each(function() { var $this = $(this), video_id = $this.data('id'), $poster = $this.closest('.wtbx_bg_video_wrapper').find('.wtbx_bg_video_poster'), mute = $this.data('mute'); $.ajax({ type:'GET', url: '//vimeo.com/api/v2/video/' + video_id + '.json', jsonp: 'callback', dataType: 'jsonp', success: function(response){ var details = response[0], width = details['width'], height = details['height'], thumb = details['thumbnail_large'], $el = ''; if ( $poster.data('poster') !== 1 ) { var $poster_el = '
'; $($poster_el).appendTo($poster); } $($el).appendTo($this); SCAPE.videoBg.videoSize($this); if (window.addEventListener) { window.addEventListener('message', onMessageReceived, false); } else { window.attachEvent('onmessage', onMessageReceived, false); } function onMessageReceived(e) { var origin = e.origin || e.originalEvent.origin; if (origin !== 'https://player.vimeo.com' && origin !== 'http://player.vimeo.com') { return; } var data = JSON.parse(e.data); switch (data.event) { case 'ready': $this.closest('.wtbx_bg_video_wrapper').addClass('wtbx_poster_hidden'); $this.closest('.wtbx_row_bg_inner').addClass('wtbx-element-visible'); break; } } } }); }); }, // youtube youtubeInit: function($el, counter) { var $this = $el, video_id = $this.data('id'), $container = $this.find('.wtbx_bg_player'), $poster = $this.closest('.wtbx_bg_video_wrapper').find('.wtbx_bg_video_poster'), mute = $this.data('mute'); if ( 'undefined' === typeof( YT.Player ) ) { // wait for youtube iframe api to load. try for 10sec, then abort counter = 'undefined' === typeof( counter ) ? 0 : counter; if ( counter > 100 ) { console.warn( 'Too many attempts to load YouTube api' ); return; } setTimeout( function () { SCAPE.videoBg.youtubeInit( $el, counter ++ ); }, 100 ); return; } var thumb = '//i1.ytimg.com/vi/'+video_id+'/maxresdefault.jpg'; if ( $poster.data('poster') !== 1 ) { var $poster_el = ''; $($poster_el).appendTo($poster); } var player; player = new YT.Player( $container[ 0 ], { videoId: video_id, playerVars: { playlist: video_id, iv_load_policy: 3, // hide annotations enablejsapi: 1, disablekb: 1, autoplay: 1, controls: 0, showinfo: 0, rel: 0, loop: 1 }, events: { onReady: function ( event ) { if ( mute === 1 ) event.target.mute(); event.target.setLoop(true); SCAPE.videoBg.youtubeReveal($this); } } } ); }, youtubeReveal: function($el) { $el.closest('.wtbx_bg_video_wrapper').addClass('wtbx_poster_hidden'); $el.closest('.wtbx_row_bg_inner').addClass('wtbx-element-visible'); SCAPE.videoBg.videoSize($el); }, // self-hosted videoSelfhosted: function() { $('.wtbx_bg_selfhosted').each(function(index) { var $this = $(this), mute = $this.data('mute'); $this.find('.wtbx_bg_player').mediaelementplayer({ features: ['volume'], pauseOtherPlayers: false, loop: true, startVolume: mute, muted: mute, autoplay: true, playsinline: 1, success: function(mediaElement, domObject) { if ( !mediaElement.paused || $('body').hasClass('device-desktop') ) { mediaElement.pause(); mediaElement.load(); mediaElement.addEventListener('loadeddata', function(e) { SCAPE.videoBg.videoSize($this); mediaElement.play(); $this.closest('.wtbx_bg_video_wrapper').addClass('wtbx_poster_hidden'); $this.closest('.wtbx_row_bg_inner').addClass('wtbx-element-visible'); }); } SCAPE.mediaelements[index] = mediaElement; }, error: function(domObject) { $(domObject).closest('.mejs-container').remove(); } }); }); }, videoSize: function($el) { if ( $el === undefined ) { $el = $('.wtbx_bg_video'); } $el.each(function() { var $this = $(this), $iframe = $this.find('.wtbx_bg_player'), $target, wW, wH; if ( $this.hasClass('wtbx_bg_youtube') ) { $target = $iframe.closest('.wtbx_bg_youtube'); wW = 16; wH = 9; } else if ( $this.hasClass('wtbx_bg_selfhosted') ) { $target = $iframe; wW = $this.data('width'); wH = $this.data('height'); } else { $target = $iframe; wW = $iframe.data('width'); wH = $iframe.data('height'); } var pW = $this.closest('.wtbx_bg_video_wrapper').width(), pH = $this.closest('.wtbx_bg_video_wrapper').height(), wR = wW/pW, hR = wH/pH, scale = Math.min(wR,hR), add = 0, rH = (wH/scale)+add, rW = (wW/scale)+add/wH*wW; $target.css({ 'height': rH+'px', 'width': rW+'px' }); }); } }; jQuery(document).ready(function($) { SCAPE.videoBg.init(); }); })(jQuery);