mirror of
https://github.com/WordPress/WordPress.git
synced 2024-09-20 19:41:28 +02:00
030bc377dd
This adds the ability for themes to add support for videos in custom headers by passing `'video' => true` as an argument when adding theme support for custom headers. Custom video headers are managed through the “Header Visuals” (i.e. “Header Image”) panel in the Customizer where you can select a video from the media library or set a URL to an external video (YouTube for now) for use in custom headers. This introduces several new functions: `has_header_video()` – Check whether a header video is set or not. `get_header_video_url()` – Retrieve header video URL for custom header. `the_header_video_url()` – Display header video URL. `get_header_video_settings()` – Retrieve header video settings. `has_custom_header()` – Check whether a custom header is set or not. `get_custom_header_markup()` – Retrieve the markup for a custom header. `the_custom_header_markup()` – Print the markup for a custom header. And a new file, `wp-includes/js/wp-custom-header.js` that handles loading videos in custom headers. This also enables video headers in the Twenty Seventeen and Twenty Fourteen themes. Props davidakennedy, celloexpressions, bradyvercher, laurelfulford, joemcgill. Fixes #38172. Built from https://develop.svn.wordpress.org/trunk@38985 git-svn-id: http://core.svn.wordpress.org/trunk@38928 1a063a9b-81f0-0310-95a4-ce76da25c4cd
1 line
2.1 KiB
JavaScript
1 line
2.1 KiB
JavaScript
!function(a,b,c){function d(){function d(){if(c.container=document.getElementById("wp-custom-header"),g()){for(var a in h){var d=h[a];if(h.hasOwnProperty(a)&&d.test(c)){d.callback(c);break}}b("body").trigger("wp-custom-header-video-loaded")}}function g(){return!(a.innerWidth<c.minWidth||a.innerHeight<c.minHeight)}var h={nativeVideo:{test:function(a){var b=document.createElement("video");return b.canPlayType(a.mimeType)},callback:e},youtube:{test:function(a){return"video/x-youtube"===a.mimeType},callback:f}};return{handlers:h,initialize:d,supportsVideo:g}}function e(a){var b=document.createElement("video");b.id="wp-custom-header-video",b.autoplay="autoplay",b.loop="loop",b.muted="muted",b.width=a.width,b.height=a.height,b.addEventListener("click",function(){b.paused?b.play():b.pause()}),a.container.innerHTML="",a.container.appendChild(b),b.src=a.videoUrl}function f(b){function c(){var c=a.YT||{};c.ready(function(){var a=document.createElement("div");a.id="wp-custom-header-video",b.container.innerHTML="",b.container.appendChild(a),new c.Player(a,{height:b.height,width:b.width,videoId:e,events:{onReady:function(a){a.target.mute()},onStateChange:function(a){c.PlayerState.ENDED===a.data&&a.target.playVideo()}},playerVars:{autoplay:1,controls:0,disablekb:1,fs:0,iv_load_policy:3,loop:1,modestbranding:1,playsinline:1,rel:0,showinfo:0}})})}var d=/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/,e=b.videoUrl.match(d)[1];if("YT"in a)c();else{var f=document.createElement("script");f.src="https://www.youtube.com/player_api",f.onload=function(){c()},document.getElementsByTagName("head")[0].appendChild(f)}}a.wp=a.wp||{},a.wp.customHeader=new d,document.addEventListener("DOMContentLoaded",a.wp.customHeader.initialize,!1),"customize"in a.wp&&(wp.customize.selectiveRefresh.bind("render-partials-response",function(a){"custom_header_settings"in a&&(c=a.custom_header_settings)}),wp.customize.selectiveRefresh.bind("partial-content-rendered",function(b){"custom_header"===b.partial.id&&a.wp.customHeader.initialize()}))}(window,jQuery,window._wpCustomHeaderSettings||{}); |