Ticket #38678: 38678.yt.diff

src/wp-content/themes/twentyseventeen/style.css

@@ -4141 +4141 @@
                 padding: 0;
         }
 }
+
+/* For testing purposes. */
+.wp-custom-header-video-button {
+        background: red;
+        position: relative;
+}

src/wp-includes/js/wp-custom-header.js

@@ -61 +61 @@
         }
 
         function nativeHandler( settings ) {
-                var video = document.createElement( 'video' );
+                var video = document.createElement( 'video' ),
+                        button = document.createElement( 'button' );
 
                 video.id = 'wp-custom-header-video';
                 video.autoplay = 'autoplay';
@@ -70 +71 @@
                 video.width = settings.width;
                 video.height = settings.height;
 
-                video.addEventListener( 'click', function() {
+                button.setAttribute( 'type', 'button' );
+                button.setAttribute( 'id', 'wp-custom-header-video-button' );
+                button.setAttribute( 'class', 'wp-custom-header-video-button' );
+                button.setAttribute( 'aria-hidden', true );
+                button.innerHTML = 'Pause';
+
+                button.addEventListener( 'click', function() {
                         if ( video.paused ) {
+                                button.innerHTML = 'Pause';
                                 video.play();
                         } else {
+                                button.innerHTML = 'Play';
                                 video.pause();
                         }
                 });
@@ -80 +89 @@
 
                 settings.container.innerHTML = '';
                 settings.container.appendChild( video );
+                settings.container.appendChild( button );
                 video.src = settings.videoUrl;
         }
 
@@ -86 +96 @@
         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];
+                        videoId = settings.videoUrl.match( VIDEO_ID_REGEX )[1],
+                        button = document.createElement( 'button' ),
+                        player;
 
                 function loadVideo() {
                         var YT = window.YT || {};
@@ -97 +109 @@
                                 settings.container.innerHTML = '';
                                 settings.container.appendChild( video );
 
-                                new YT.Player( video, {
+                                player = new YT.Player( video, {
                                         height: settings.height,
                                         width: settings.width,
                                         videoId: videoId,
@@ -119 +131 @@
                                                 iv_load_policy: 3,
                                                 loop: 1,
                                                 modestbranding: 1,
-                                                //origin: '',
                                                 playsinline: 1,
                                                 rel: 0,
                                                 showinfo: 0
                                         }
                                 });
+
+                        button.setAttribute( 'type', 'button' );
+                        button.setAttribute( 'id', 'wp-custom-header-video-button' );
+                        button.setAttribute( 'class', 'wp-custom-header-video-button' );
+                        button.setAttribute( 'aria-hidden', true );
+                        button.innerHTML = 'Pause';
+
+                        button.addEventListener( 'click', function() {
+                                var playbackStatus = player.getPlayerState();
+                                // The YT API returns 1 for playing and 2 for paused.
+                                if ( 2 === playbackStatus ) {
+                                        button.innerHTML = 'Pause';
+                                        player.playVideo();
+                                } else {
+                                        button.innerHTML = 'Play';
+                                        player.pauseVideo();
+                                }
                         });
+
+                        settings.container.appendChild( button );
+                        });
                 }
 
                 if ( 'YT' in window ) {