WordPress.org

Make WordPress Core

Ticket #38678: 38678.yt.diff

File 38678.yt.diff, 3.3 KB (added by afercia, 4 years ago)
  • src/wp-content/themes/twentyseventeen/style.css

     
    41414141                padding: 0;
    41424142        }
    41434143}
     4144
     4145/* For testing purposes. */
     4146.wp-custom-header-video-button {
     4147        background: red;
     4148        position: relative;
     4149}
  • src/wp-includes/js/wp-custom-header.js

     
    6161        }
    6262
    6363        function nativeHandler( settings ) {
    64                 var video = document.createElement( 'video' );
     64                var video = document.createElement( 'video' ),
     65                        button = document.createElement( 'button' );
    6566
    6667                video.id = 'wp-custom-header-video';
    6768                video.autoplay = 'autoplay';
     
    7071                video.width = settings.width;
    7172                video.height = settings.height;
    7273
    73                 video.addEventListener( 'click', function() {
     74                button.setAttribute( 'type', 'button' );
     75                button.setAttribute( 'id', 'wp-custom-header-video-button' );
     76                button.setAttribute( 'class', 'wp-custom-header-video-button' );
     77                button.setAttribute( 'aria-hidden', true );
     78                button.innerHTML = 'Pause';
     79
     80                button.addEventListener( 'click', function() {
    7481                        if ( video.paused ) {
     82                                button.innerHTML = 'Pause';
    7583                                video.play();
    7684                        } else {
     85                                button.innerHTML = 'Play';
    7786                                video.pause();
    7887                        }
    7988                });
     
    8089
    8190                settings.container.innerHTML = '';
    8291                settings.container.appendChild( video );
     92                settings.container.appendChild( button );
    8393                video.src = settings.videoUrl;
    8494        }
    8595
     
    8696        function youtubeHandler( settings ) {
    8797                // @link http://stackoverflow.com/a/27728417
    8898                var VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/,
    89                         videoId = settings.videoUrl.match( VIDEO_ID_REGEX )[1];
     99                        videoId = settings.videoUrl.match( VIDEO_ID_REGEX )[1],
     100                        button = document.createElement( 'button' ),
     101                        player;
    90102
    91103                function loadVideo() {
    92104                        var YT = window.YT || {};
     
    97109                                settings.container.innerHTML = '';
    98110                                settings.container.appendChild( video );
    99111
    100                                 new YT.Player( video, {
     112                                player = new YT.Player( video, {
    101113                                        height: settings.height,
    102114                                        width: settings.width,
    103115                                        videoId: videoId,
     
    119131                                                iv_load_policy: 3,
    120132                                                loop: 1,
    121133                                                modestbranding: 1,
    122                                                 //origin: '',
    123134                                                playsinline: 1,
    124135                                                rel: 0,
    125136                                                showinfo: 0
    126137                                        }
    127138                                });
     139
     140                        button.setAttribute( 'type', 'button' );
     141                        button.setAttribute( 'id', 'wp-custom-header-video-button' );
     142                        button.setAttribute( 'class', 'wp-custom-header-video-button' );
     143                        button.setAttribute( 'aria-hidden', true );
     144                        button.innerHTML = 'Pause';
     145
     146                        button.addEventListener( 'click', function() {
     147                                var playbackStatus = player.getPlayerState();
     148                                // The YT API returns 1 for playing and 2 for paused.
     149                                if ( 2 === playbackStatus ) {
     150                                        button.innerHTML = 'Pause';
     151                                        player.playVideo();
     152                                } else {
     153                                        button.innerHTML = 'Play';
     154                                        player.pauseVideo();
     155                                }
    128156                        });
     157
     158                        settings.container.appendChild( button );
     159                        });
    129160                }
    130161
    131162                if ( 'YT' in window ) {