From f3034f1b1c407e900aec5a93bba2777b08b093e0 Mon Sep 17 00:00:00 2001
From: Dominik Schilling <dominikschilling+git@gmail.com>
Date: Sat, 10 Apr 2021 12:40:05 +0000
Subject: [PATCH] Customize: Set `playsinline` attribute for custom header
 videos.

With the `playsinline` attribute the video can also autoplay on mobile browsers without asking the user to open it up fullscreen.
Also, change all video element properties to use boolean values.

Props klevyke, ocean90.
Fixes #50111.
Built from https://develop.svn.wordpress.org/trunk@50698


git-svn-id: http://core.svn.wordpress.org/trunk@50307 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-includes/js/wp-custom-header.js     | 7 ++++---
 wp-includes/js/wp-custom-header.min.js | 2 +-
 wp-includes/version.php                | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/wp-includes/js/wp-custom-header.js b/wp-includes/js/wp-custom-header.js
index 5a446727fa..ae43f56174 100644
--- a/wp-includes/js/wp-custom-header.js
+++ b/wp-includes/js/wp-custom-header.js
@@ -287,9 +287,10 @@
 				video = document.createElement( 'video' );
 
 			video.id = 'wp-custom-header-video';
-			video.autoplay = 'autoplay';
-			video.loop = 'loop';
-			video.muted = 'muted';
+			video.autoplay = true;
+			video.loop = true;
+			video.muted = true;
+			video.playsInline = true;
 			video.width = this.settings.width;
 			video.height = this.settings.height;
 
diff --git a/wp-includes/js/wp-custom-header.min.js b/wp-includes/js/wp-custom-header.min.js
index 3c88813e3c..8573af68fa 100644
--- a/wp-includes/js/wp-custom-header.min.js
+++ b/wp-includes/js/wp-custom-header.min.js
@@ -1,2 +1,2 @@
 /*! This file is auto-generated */
-!function(n,t){var e,i;function a(e,t){var i;"function"==typeof n.Event?i=new Event(t):(i=document.createEvent("Event")).initEvent(t,!0,!0),e.dispatchEvent(i)}function o(){this.handlers={nativeVideo:new e,youtube:new i}}function s(){}n.wp=n.wp||{},"addEventListener"in n&&(o.prototype={initialize:function(){if(this.supportsVideo())for(var e in this.handlers){e=this.handlers[e];if("test"in e&&e.test(t)){this.activeHandler=e.initialize.call(e,t),a(document,"wp-custom-header-video-loaded");break}}},supportsVideo:function(){return!(n.innerWidth<t.minWidth||n.innerHeight<t.minHeight)},BaseVideoHandler:s},s.prototype={initialize:function(e){var t=this,i=document.createElement("button");this.settings=e,this.container=document.getElementById("wp-custom-header"),(this.button=i).setAttribute("type","button"),i.setAttribute("id","wp-custom-header-video-button"),i.setAttribute("class","wp-custom-header-video-button wp-custom-header-video-play"),i.innerHTML=e.l10n.play,i.addEventListener("click",function(){t.isPaused()?t.play():t.pause()}),this.container.addEventListener("play",function(){i.className="wp-custom-header-video-button wp-custom-header-video-play",i.innerHTML=e.l10n.pause,"a11y"in n.wp&&n.wp.a11y.speak(e.l10n.playSpeak)}),this.container.addEventListener("pause",function(){i.className="wp-custom-header-video-button wp-custom-header-video-pause",i.innerHTML=e.l10n.play,"a11y"in n.wp&&n.wp.a11y.speak(e.l10n.pauseSpeak)}),this.ready()},ready:function(){},isPaused:function(){},pause:function(){},play:function(){},setVideo:function(e){var t,i=this.container.getElementsByClassName("customize-partial-edit-shortcut");i.length&&(t=this.container.removeChild(i[0])),this.container.innerHTML="",this.container.appendChild(e),t&&this.container.appendChild(t)},showControls:function(){this.container.contains(this.button)||this.container.appendChild(this.button)},test:function(){return!1},trigger:function(e){a(this.container,e)}},e=(s.extend=function(e){function t(){return s.apply(this,arguments)}for(var i in(t.prototype=Object.create(s.prototype)).constructor=t,e)t.prototype[i]=e[i];return t})({test:function(e){return document.createElement("video").canPlayType(e.mimeType)},ready:function(){var e=this,t=document.createElement("video");t.id="wp-custom-header-video",t.autoplay="autoplay",t.loop="loop",t.muted="muted",t.width=this.settings.width,t.height=this.settings.height,t.addEventListener("play",function(){e.trigger("play")}),t.addEventListener("pause",function(){e.trigger("pause")}),t.addEventListener("canplay",function(){e.showControls()}),this.video=t,e.setVideo(t),t.src=this.settings.videoUrl},isPaused:function(){return this.video.paused},pause:function(){this.video.pause()},play:function(){this.video.play()}}),i=s.extend({test:function(e){return"video/x-youtube"===e.mimeType},ready:function(){var e,t=this;"YT"in n?YT.ready(t.loadVideo.bind(t)):((e=document.createElement("script")).src="https://www.youtube.com/iframe_api",e.onload=function(){YT.ready(t.loadVideo.bind(t))},document.getElementsByTagName("head")[0].appendChild(e))},loadVideo:function(){var t=this,e=document.createElement("div");e.id="wp-custom-header-video",t.setVideo(e),t.player=new YT.Player(e,{height:this.settings.height,width:this.settings.width,videoId:this.settings.videoUrl.match(/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/)[1],events:{onReady:function(e){e.target.mute(),t.showControls()},onStateChange:function(e){YT.PlayerState.PLAYING===e.data?t.trigger("play"):YT.PlayerState.PAUSED===e.data?t.trigger("pause"):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,playsinline:1,rel:0,showinfo:0}})},isPaused:function(){return YT.PlayerState.PAUSED===this.player.getPlayerState()},pause:function(){this.player.pauseVideo()},play:function(){this.player.playVideo()}}),n.wp.customHeader=new o,document.addEventListener("DOMContentLoaded",n.wp.customHeader.initialize.bind(n.wp.customHeader),!1),"customize"in n.wp&&(n.wp.customize.selectiveRefresh.bind("render-partials-response",function(e){"custom_header_settings"in e&&(t=e.custom_header_settings)}),n.wp.customize.selectiveRefresh.bind("partial-content-rendered",function(e){"custom_header"===e.partial.id&&n.wp.customHeader.initialize()})))}(window,window._wpCustomHeaderSettings||{});
\ No newline at end of file
+!function(i,t){var e,n;function a(e,t){var n;"function"==typeof i.Event?n=new Event(t):(n=document.createEvent("Event")).initEvent(t,!0,!0),e.dispatchEvent(n)}function o(){this.handlers={nativeVideo:new e,youtube:new n}}function s(){}i.wp=i.wp||{},"addEventListener"in i&&(o.prototype={initialize:function(){if(this.supportsVideo())for(var e in this.handlers){e=this.handlers[e];if("test"in e&&e.test(t)){this.activeHandler=e.initialize.call(e,t),a(document,"wp-custom-header-video-loaded");break}}},supportsVideo:function(){return!(i.innerWidth<t.minWidth||i.innerHeight<t.minHeight)},BaseVideoHandler:s},s.prototype={initialize:function(e){var t=this,n=document.createElement("button");this.settings=e,this.container=document.getElementById("wp-custom-header"),(this.button=n).setAttribute("type","button"),n.setAttribute("id","wp-custom-header-video-button"),n.setAttribute("class","wp-custom-header-video-button wp-custom-header-video-play"),n.innerHTML=e.l10n.play,n.addEventListener("click",function(){t.isPaused()?t.play():t.pause()}),this.container.addEventListener("play",function(){n.className="wp-custom-header-video-button wp-custom-header-video-play",n.innerHTML=e.l10n.pause,"a11y"in i.wp&&i.wp.a11y.speak(e.l10n.playSpeak)}),this.container.addEventListener("pause",function(){n.className="wp-custom-header-video-button wp-custom-header-video-pause",n.innerHTML=e.l10n.play,"a11y"in i.wp&&i.wp.a11y.speak(e.l10n.pauseSpeak)}),this.ready()},ready:function(){},isPaused:function(){},pause:function(){},play:function(){},setVideo:function(e){var t,n=this.container.getElementsByClassName("customize-partial-edit-shortcut");n.length&&(t=this.container.removeChild(n[0])),this.container.innerHTML="",this.container.appendChild(e),t&&this.container.appendChild(t)},showControls:function(){this.container.contains(this.button)||this.container.appendChild(this.button)},test:function(){return!1},trigger:function(e){a(this.container,e)}},e=(s.extend=function(e){function t(){return s.apply(this,arguments)}for(var n in(t.prototype=Object.create(s.prototype)).constructor=t,e)t.prototype[n]=e[n];return t})({test:function(e){return document.createElement("video").canPlayType(e.mimeType)},ready:function(){var e=this,t=document.createElement("video");t.id="wp-custom-header-video",t.autoplay=!0,t.loop=!0,t.muted=!0,t.playsInline=!0,t.width=this.settings.width,t.height=this.settings.height,t.addEventListener("play",function(){e.trigger("play")}),t.addEventListener("pause",function(){e.trigger("pause")}),t.addEventListener("canplay",function(){e.showControls()}),this.video=t,e.setVideo(t),t.src=this.settings.videoUrl},isPaused:function(){return this.video.paused},pause:function(){this.video.pause()},play:function(){this.video.play()}}),n=s.extend({test:function(e){return"video/x-youtube"===e.mimeType},ready:function(){var e,t=this;"YT"in i?YT.ready(t.loadVideo.bind(t)):((e=document.createElement("script")).src="https://www.youtube.com/iframe_api",e.onload=function(){YT.ready(t.loadVideo.bind(t))},document.getElementsByTagName("head")[0].appendChild(e))},loadVideo:function(){var t=this,e=document.createElement("div");e.id="wp-custom-header-video",t.setVideo(e),t.player=new YT.Player(e,{height:this.settings.height,width:this.settings.width,videoId:this.settings.videoUrl.match(/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/)[1],events:{onReady:function(e){e.target.mute(),t.showControls()},onStateChange:function(e){YT.PlayerState.PLAYING===e.data?t.trigger("play"):YT.PlayerState.PAUSED===e.data?t.trigger("pause"):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,playsinline:1,rel:0,showinfo:0}})},isPaused:function(){return YT.PlayerState.PAUSED===this.player.getPlayerState()},pause:function(){this.player.pauseVideo()},play:function(){this.player.playVideo()}}),i.wp.customHeader=new o,document.addEventListener("DOMContentLoaded",i.wp.customHeader.initialize.bind(i.wp.customHeader),!1),"customize"in i.wp&&(i.wp.customize.selectiveRefresh.bind("render-partials-response",function(e){"custom_header_settings"in e&&(t=e.custom_header_settings)}),i.wp.customize.selectiveRefresh.bind("partial-content-rendered",function(e){"custom_header"===e.partial.id&&i.wp.customHeader.initialize()})))}(window,window._wpCustomHeaderSettings||{});
\ No newline at end of file
diff --git a/wp-includes/version.php b/wp-includes/version.php
index 759a6c34c8..faff6496c7 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.8-alpha-50697';
+$wp_version = '5.8-alpha-50698';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.