(function( window, settings ) { if ( ! ( 'addEventListener' in window ) ) { // Fail gracefully in unsupported browsers. return; } function wpCustomHeader() { var handlers = { nativeVideo: { test: function( settings ) { var video = document.createElement( 'video' ); return video.canPlayType( settings.mimeType ); }, callback: nativeHandler }, youtube: { test: function( settings ) { return 'video/x-youtube' === settings.mimeType; }, callback: youtubeHandler } }; function initialize() { settings.container = document.getElementById( 'wp-custom-header' ); if ( supportsVideo() ) { for ( var id in handlers ) { var handler = handlers[ id ]; if ( handlers.hasOwnProperty( id ) && handler.test( settings ) ) { handler.callback( settings ); // Set up and dispatch custom event when the video is loaded. if ( 'dispatchEvent' in window ) { var videoLoaded = new Event( 'wp-custom-header-video-loaded' ); document.dispatchEvent( videoLoaded ); } break; } } } } function supportsVideo() { // Don't load video on small screens. @todo: consider bandwidth and other factors. if ( window.innerWidth < settings.minWidth || window.innerHeight < settings.minHeight ) { return false; } return true; } return { handlers: handlers, initialize: initialize, supportsVideo: supportsVideo }; } function nativeHandler( settings ) { var video = document.createElement( 'video' ); video.id = 'wp-custom-header-video'; video.autoplay = 'autoplay'; video.loop = 'loop'; video.muted = 'muted'; video.width = settings.width; video.height = settings.height; video.addEventListener( 'click', function() { if ( video.paused ) { video.play(); } else { video.pause(); } }); settings.container.innerHTML = ''; settings.container.appendChild( video ); video.src = settings.videoUrl; } function youtubeHandler( settings ) { // @link http://stackoverflow.com/a/27728417 var VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/, videoId = settings.videoUrl.match( VIDEO_ID_REGEX )[1]; function loadVideo() { var YT = window.YT || {}; YT.ready(function() { var video = document.createElement( 'div' ); video.id = 'wp-custom-header-video'; settings.container.innerHTML = ''; settings.container.appendChild( video ); new YT.Player( video, { height: settings.height, width: settings.width, videoId: videoId, events: { onReady: function( e ) { e.target.mute(); }, onStateChange: function( e ) { if ( YT.PlayerState.ENDED === e.data ) { e.target.playVideo(); } } }, playerVars: { autoplay: 1, controls: 0, disablekb: 1, fs: 0, iv_load_policy: 3, loop: 1, modestbranding: 1, //origin: '', playsinline: 1, rel: 0, showinfo: 0 } }); }); } if ( 'YT' in window ) { loadVideo(); } else { var tag = document.createElement( 'script' ); tag.src = 'https://www.youtube.com/player_api'; tag.onload = function () { loadVideo(); }; document.getElementsByTagName( 'head' )[0].appendChild( tag ); } } window.wp = window.wp || {}; window.wp.customHeader = new wpCustomHeader(); document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize, false ); if ( 'customize' in window.wp ) { wp.customize.selectiveRefresh.bind( 'render-partials-response', function( response ) { if ( 'custom_header_settings' in response ) { settings = response.custom_header_settings; } }); wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) { if ( 'custom_header' === placement.partial.id ) { window.wp.customHeader.initialize(); } }); } })( window, window._wpCustomHeaderSettings || {} );