WordPress.org
Get WordPress

Make WordPress Core

Ticket #38172: 38172.9.diff

File 38172.9.diff, 28.7 KB (added by bradyvercher, 7 years ago)

  • src/wp-content/themes/twentyfourteen/functions.php

     
    434434                $classes[] = 'group-blog';
    435435        }
    436436
    437         if ( get_header_image() ) {
     437        if ( get_header_image() || function_exists( 'has_header_video' ) && has_header_video() ) {
    438438                $classes[] = 'header-image';
    439439        } elseif ( ! in_array( $GLOBALS['pagenow'], array( 'wp-activate.php', 'wp-signup.php' ) ) ) {
    440440                $classes[] = 'masthead-fixed';

  • src/wp-content/themes/twentyfourteen/header.php

     
    3232
    3333<body <?php body_class(); ?>>
    3434<div id="page" class="hfeed site">
    35         <?php if ( get_header_image() ) : ?>
     35        <?php if ( function_exists( 'has_header_video' ) && has_header_video() ) : ?>
     36                <div id="site-header">
     37                        <?php the_custom_header(); ?>
     38                </div>
     39        <?php elseif ( get_header_image() ) : ?>
    3640        <div id="site-header">
    3741                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    3842                        <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">

  • src/wp-content/themes/twentyfourteen/inc/custom-header.php

     
    4040                'width'                  => 1260,
    4141                'height'                 => 240,
    4242                'flex-height'            => true,
     43                'video'                  => true,
    4344                'wp-head-callback'       => 'twentyfourteen_header_style',
    4445                'admin-head-callback'    => 'twentyfourteen_admin_header_style',
    4546                'admin-preview-callback' => 'twentyfourteen_admin_header_image',

  • src/wp-content/themes/twentyfourteen/js/functions.js

     
    103103
    104104                        if ( body.is( '.header-image' ) ) {
    105105                                toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
    106                                 mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
     106                                mastheadOffset = $( '#site-header' ).height() - toolbarOffset;
    107107
    108108                                _window.on( 'scroll.twentyfourteen', function() {
    109109                                        if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
    … …  
    112112                                                body.removeClass( 'masthead-fixed' );
    113113                                        }
    114114                                } );
     115
     116                                // Update masthead offset after a selective refresh.
     117                                if ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh ) {
     118                                        wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
     119                                                mastheadOffset = $( '#site-header' ).height() - toolbarOffset;
     120                                        } );
     121                                }
    115122                        }
    116123                }
    117124

  • src/wp-content/themes/twentyfourteen/style.css

     
    8888video {
    8989        display: inline-block;
    9090        max-width: 100%;
     91        height: auto;
    9192}
    9293
    9394html {
    … …  
    608609        max-width: 100%;
    609610}
    610611
     612#wp-custom-header iframe,
     613#wp-custom-header video {
     614        margin-bottom: -8px;
     615}
     616
    611617p > embed,
    612618p > iframe,
    613619p > object,

  • src/wp-content/themes/twentyseventeen/assets/css/ie8.css

     
    3737
    3838/* Site Branding */
    3939
     40.has-header-image .custom-header-image img,
     41.has-header-image .custom-header-image video {
     42        left: 0;
     43        top: 0;
     44}
     45
    4046.site-title {
    4147        font-weight: bolder;
    4248}

  • src/wp-content/themes/twentyseventeen/footer.php

     
    1414
    1515?>
    1616
    17         </div><!-- #content -->
     17                </div><!-- #content -->
    1818
    19         <footer id="colophon" class="site-footer" role="contentinfo">
    20                 <div class="wrap">
    21                         <?php
    22                         get_template_part( 'template-parts/footer/footer', 'widgets' );
     19                <footer id="colophon" class="site-footer" role="contentinfo">
     20                        <div class="wrap">
     21                                <?php
     22                                get_template_part( 'template-parts/footer/footer', 'widgets' );
    2323
    24                         if ( has_nav_menu( 'social' ) ) : ?>
    25                                 <nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
    26                                         <?php
    27                                                 wp_nav_menu( array(
    28                                                         'theme_location' => 'social',
    29                                                         'menu_class'     => 'social-links-menu',
    30                                                         'depth'          => 1,
    31                                                         'link_before'    => '<span class="screen-reader-text">',
    32                                                         'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
    33                                                 ) );
    34                                         ?>
    35                                 </nav><!-- .social-navigation -->
    36                         <?php endif;
     24                                if ( has_nav_menu( 'social' ) ) : ?>
     25                                        <nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
     26                                                <?php
     27                                                        wp_nav_menu( array(
     28                                                                'theme_location' => 'social',
     29                                                                'menu_class'     => 'social-links-menu',
     30                                                                'depth'          => 1,
     31                                                                'link_before'    => '<span class="screen-reader-text">',
     32                                                                'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
     33                                                        ) );
     34                                                ?>
     35                                        </nav><!-- .social-navigation -->
     36                                <?php endif;
    3737
    38                         get_template_part( 'template-parts/footer/site', 'info' );
    39                         ?>
    40                 </div><!-- .wrap -->
    41         </footer><!-- #colophon -->
     38                                get_template_part( 'template-parts/footer/site', 'info' );
     39                                ?>
     40                        </div><!-- .wrap -->
     41                </footer><!-- #colophon -->
     42        </div><!-- .site-content-contain -->
    4243</div><!-- #page -->
    4344<?php wp_footer(); ?>
    4445

  • src/wp-content/themes/twentyseventeen/header.php

     
    4949        endif;
    5050        ?>
    5151
    52         <div id="content" class="site-content">
     52        <div class="site-content-contain">
     53                <div id="content" class="site-content">

  • src/wp-content/themes/twentyseventeen/inc/custom-header.php

     
    3939                'width'              => 2000,
    4040                'height'             => 1200,
    4141                'flex-height'        => true,
     42                'video'              => true,
    4243                'wp-head-callback'   => 'twentyseventeen_header_style',
    4344        ) ) );
    4445

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

     
    12881288        border-top: 1px solid #eee;
    12891289        font-size: 16px;
    12901290        font-size: 1rem;
     1291        position: relative;
    12911292}
    12921293
    12931294.navigation-top .wrap {
    … …  
    15291530
    15301531.site-branding {
    15311532        padding: 1em 0;
     1533        position: relative;
    15321534        -webkit-transition: margin-bottom 0.2s;
    15331535        transition: margin-bottom 0.2s;
     1536        z-index: 3;
    15341537}
    15351538
    15361539.site-branding a {
    … …  
    16231626}
    16241627
    16251628.custom-header-image {
    1626         background-position: center center;
    1627         background-repeat: no-repeat;
    1628         -webkit-background-size: cover;
    1629         background-size: cover;
    16301629        bottom: 0;
    16311630        left: 0;
     1631        overflow: hidden;
    16321632        position: absolute;
    16331633        right: 0;
    16341634        top: 0;
     1635        width: 100%;
    16351636}
    16361637
    16371638.custom-header-image:before {
    … …  
    16471648        left: 0;
    16481649        position: absolute;
    16491650        right: 0;
     1651        z-index: 2;
    16501652}
    16511653
    1652 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image {
    1653         background-position: center bottom;
     1654.has-header-image .custom-header-image img,
     1655.has-header-image .custom-header-image video,
     1656.has-header-image .custom-header-image iframe {
     1657        position: fixed;
     1658        height: auto;
     1659        left: 50%;
     1660        max-width: 1000%;
     1661        min-height: 100%;
     1662        min-width: 100%;
     1663        min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
     1664        width: auto;
     1665        top: 50%;
     1666        -ms-transform: translateX(-50%) translateY(-50%);
     1667        -moz-transform: translateX(-50%) translateY(-50%);
     1668        -webkit-transform: translateX(-50%) translateY(-50%);
     1669        transform: translateX(-50%) translateY(-50%);
    16541670}
    16551671
     1672.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img {
     1673        bottom: 0;
     1674        position: absolute;
     1675        top: auto;
     1676        -ms-transform: translateX(-50%) translateY(0);
     1677        -moz-transform: translateX(-50%) translateY(0);
     1678        -webkit-transform: translateX(-50%) translateY(0);
     1679        transform: translateX(-50%) translateY(0);
     1680}
     1681
    16561682body:not(.has-header-image) .custom-header-image {
    16571683        padding: 5% 0;
    16581684}
    … …  
    17501776## Regular Content
    17511777--------------------------------------------------------------*/
    17521778
     1779.site-content-contain {
     1780        background-color: #fff;
     1781        position: relative;
     1782}
     1783
    17531784.site-content {
    17541785        padding: 2.5em 0 0;
    17551786}
    … …  
    26152646# Media
    26162647--------------------------------------------------------------*/
    26172648
    2618 img {
     2649img,
     2650video {
    26192651        height: auto; /* Make sure images are scaled correctly. */
    26202652        max-width: 100%; /* Adhere to container width. */
    26212653}
    … …  
    32593291
    32603292        .has-header-image.twentyseventeen-front-page .custom-header,
    32613293        .has-header-image.home.blog .custom-header {
    3262                 display: block;
    32633294                min-height: 0;
    32643295        }
    32653296
    … …  
    32683299                position: relative;
    32693300        }
    32703301
     3302        .twentyseventeen-front-page.has-header-image .custom-header-image,
     3303        .home.blog.has-header-image .custom-header-image {
     3304                height: 0;
     3305                position: relative;
     3306        }
     3307
    32713308        .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image {
    32723309                bottom: 0;
    32733310                height: auto;
    … …  
    32773314                top: 0;
    32783315        }
    32793316
    3280         .twentyseventeen-front-page.has-header-image .custom-header-image,
    3281         .home.blog.has-header-image .custom-header-image {
    3282                 height: 0;
    3283                 padding-top: 66%;
    3284                 position: relative;
    3285         }
    3286 
    32873317        .custom-logo-link {
    32883318                padding-right: 2em;
    32893319        }
    … …  
    35553585                height: 1200px;
    35563586                height: 100vh;
    35573587                max-height: 100%;
    3558                 padding: 10% 0;
     3588                overflow: hidden;
     3589                /* padding: 10% 0; */
    35593590        }
    35603591
    35613592        .twentyseventeen-front-page.has-header-image .custom-header-image:before,
    … …  
    39023933
    39033934@media screen and ( min-width: 55em ) {
    39043935
    3905         .twentyseventeen-front-page.has-header-image .custom-header-image,
    3906         .home.blog.has-header-image .custom-header-image {
    3907                 background-attachment: fixed;
    3908         }
    3909 
    39103936        .panel-image {
    39113937                background-attachment: fixed;
    39123938        }

  • src/wp-content/themes/twentyseventeen/template-parts/header/header-image.php

     
    1414        $header_image = get_header_image();
    1515
    1616        // Check if Custom Header image has been added.
    17         if ( ! empty( $header_image ) ) : ?>
     17        if ( ! empty( $header_image ) ) :
    1818
    19                 <div class="custom-header-image" style="background-image: url(<?php echo esc_url( $header_image ); ?>)"></div>
    20                 <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
     19                // If yes, check if we're on the front page
     20                if ( twentyseventeen_is_frontpage() ) : ?>
    2121
     22                        <?php // Output the full custom header - video and/or image fallback. ?>
     23                        <div class="custom-header-image">
     24                                <?php the_custom_header(); ?>
     25                        </div>
     26                        <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
     27
     28                <?php else : ?>
     29
     30                        <?php // If we're not on the front page, only output the header image. ?>
     31                        <div class="custom-header-image">
     32                                <img src="<?php echo esc_url( $header_image ); ?>">
     33                        </div>
     34                        <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
     35
     36                <?php endif; ?>
     37
    2238        <?php else : ?>
     39
    2340                <?php // Otherwise, show a blank header. ?>
    2441                <div class="custom-header-simple">
    2542                        <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>

  • src/wp-includes/class-wp-customize-manager.php

     
    362362                add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_section_templates' ), 1 );
    363363                add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_control_templates' ), 1 );
    364364
     365                // Export header video settings with the partial response.
     366                add_filter( 'customize_render_partials_response', array( $this, 'export_header_video_settings' ), 10, 3 );
     367
    365368                // Export the settings to JS via the _wpCustomizeSettings variable.
    366369                add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_pane_settings' ), 1000 );
    367370
    … …  
    32253228
    32263229                /* Custom Header */
    32273230
     3231                if ( current_theme_supports( 'custom-header', 'video' ) ) {
     3232                        $title = __( 'Header Visuals' );
     3233                        $description = __( 'If you add a video, the image will be used as a fallback while the video loads.' );
     3234                        $width = absint( get_theme_support( 'custom-header', 'width' ) );
     3235                        $height = absint( get_theme_support( 'custom-header', 'height' ) );
     3236                        if ( $width && $height ) {
     3237                                /* translators: %s: header size in pixels */
     3238                                $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends dimensions of %s pixels.' ),
     3239                                        sprintf( '<strong>%s &times; %s</strong>', $width, $height )
     3240                                );
     3241                        } elseif ( $width ) {
     3242                                /* translators: %s: header width in pixels */
     3243                                $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends a width of %s pixels.' ),
     3244                                        sprintf( '<strong>%s</strong>', $width )
     3245                                );
     3246                        } else {
     3247                                /* translators: %s: header height in pixels */
     3248                                $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends a height of %s pixels.' ),
     3249                                        sprintf( '<strong>%s</strong>', $height )
     3250                                );
     3251                        }
     3252                } else {
     3253                        $title = __( 'Header Image' );
     3254                        $description = '';
     3255                        $control_description = '';
     3256                }
     3257
    32283258                $this->add_section( 'header_image', array(
    3229                         'title'          => __( 'Header Image' ),
     3259                        'title'          => $title,
     3260                        'description'    => $description,
    32303261                        'theme_supports' => 'custom-header',
    32313262                        'priority'       => 60,
    32323263                ) );
    32333264
     3265                $this->add_setting( 'header_video', array(
     3266                        'theme_supports'    => array( 'custom-header', 'video' ),
     3267                        'transport'         => 'postMessage',
     3268                        'sanitize_callback' => 'absint',
     3269                        'validate_callback' => array( $this, '_validate_header_video' ),
     3270                ) );
     3271
     3272                $this->add_setting( 'external_header_video', array(
     3273                        'theme_supports'    => array( 'custom-header', 'video' ),
     3274                        'transport'         => 'postMessage',
     3275                        'sanitize_callback' => 'esc_url',
     3276                        'validate_callback' => array( $this, '_validate_external_header_video' ),
     3277                ) );
     3278
    32343279                $this->add_setting( new WP_Customize_Filter_Setting( $this, 'header_image', array(
    32353280                        'default'        => get_theme_support( 'custom-header', 'default-image' ),
    32363281                        'theme_supports' => 'custom-header',
    … …  
    32413286                        'theme_supports' => 'custom-header',
    32423287                ) ) );
    32433288
     3289                $this->add_control( new WP_Customize_Media_Control( $this, 'header_video', array(
     3290                        'theme_supports' => array( 'custom-header', 'video' ),
     3291                        'label'          => __( 'Header Video' ),
     3292                        'description'    => $control_description,
     3293                        'section'        => 'header_image',
     3294                        'mime_type'      => 'video',
     3295                ) ) );
     3296
     3297                $this->add_control( 'external_header_video', array(
     3298                        'theme_supports' => array( 'custom-header', 'video' ),
     3299                        'type'           => 'url',
     3300                        'description'    => __( 'Or, enter a YouTube or Vimeo URL:' ),
     3301                        'section'        => 'header_image',
     3302                ) );
     3303
    32443304                $this->add_control( new WP_Customize_Header_Image_Control( $this ) );
    32453305
     3306                $this->selective_refresh->add_partial( 'header_video', array(
     3307                        'selector'            => '#wp-custom-header',
     3308                        'render_callback'     => 'the_custom_header',
     3309                        'settings'            => array( 'header_video', 'external_header_video', 'header_image' ), // The image is used as a video fallback here.
     3310                        'container_inclusive' => true,
     3311                ) );
     3312
    32463313                /* Custom Background */
    32473314
    32483315                $this->add_section( 'background_image', array(
    … …  
    35993666        }
    36003667
    36013668        /**
     3669         * Export header video settings to facilitate selective refresh.
     3670         *
     3671         * @since 4.7.0
     3672         *
     3673         * @param array $response Response.
     3674         * @param WP_Customize_Selective_Refresh $selective_refresh Selective refresh component.
     3675         * @param array $partials Array of partials.
     3676         * @return array
     3677         */
     3678        public function export_header_video_settings( $response, $selective_refresh, $partials ) {
     3679                if ( isset( $partials['header_video'] ) || isset( $partials['external_header_video'] ) ) {
     3680                        $response['custom_header_settings'] = get_header_video_settings();
     3681                }
     3682
     3683                return $response;
     3684        }
     3685
     3686        /**
     3687         * Callback for validating the header_video value.
     3688         *
     3689         * Ensures that the selected video is less than 8MB and provides an error message.
     3690         *
     3691         * @since 4.7.0
     3692         *
     3693         * @param WP_Error $validity
     3694         * @param mixed $value
     3695         * @return mixed
     3696         */
     3697        public function _validate_header_video( $validity, $value ) {
     3698                $video = get_attached_file( absint( $value ) );
     3699                if ( $video ) {
     3700                        $size = filesize( $video );
     3701                        if ( 8 < $size / pow( 1024, 2 ) ) { // Check whether the size is larger than 8MB.
     3702                                $validity->add( 'size_too_large', __( 'This video file is too large to use as a header video. Try a shorter video or optimize the compression settings and re-upload a file that is less than 8MB. Or, upload your video to YouTube and link it with the option below.' ) );
     3703                        }
     3704                        if ( '.mp4' !== substr( $video, -4 ) && '.mov' !== substr( $video, -4 ) ) { // Check for .mp4 or .mov format, which (assuming h.264 encoding) are the only cross-browser-supported formats.
     3705                                $validity->add( 'invalid_file_type', __( 'Only <code>.mp4</code> or <code>.mov</code> files may be used for header video. Please convert your video file and try again, or, upload your video to YouTube and link it with the option below.' ) );
     3706                        }
     3707                }
     3708                return $validity;
     3709        }
     3710
     3711        /**
     3712         * Callback for validating the external_header_video value.
     3713         *
     3714         * Ensures that the provided URL is for YouTube or Vimeo.
     3715         *
     3716         * @since 4.7.0
     3717         *
     3718         * @param WP_Error $validity
     3719         * @param mixed $value
     3720         * @return mixed
     3721         */
     3722        public function _validate_external_header_video( $validity, $value ) {
     3723                $video = esc_url( $value );
     3724                if ( $video ) {
     3725                        if ( get_theme_mod( 'header_video', false ) ) {
     3726                                $validity->add( 'unused_option', __( 'Please remove the uploaded video above to use the external video linked here.' ) );
     3727                        }
     3728                        if ( ! preg_match( '#^https?://(?:www\.)?(?:youtube\.com/watch|youtu\.be/)#', $video )
     3729                             && ! preg_match( '#^https?://(.+\.)?vimeo\.com/.*#', $video ) ) {
     3730                                $validity->add( 'invalid_url', __( 'Please enter a valid YouTube or Vimeo video URL.' ) );
     3731                        }
     3732                }
     3733                return $validity;
     3734        }
     3735
     3736        /**
    36023737         * Callback for rendering the custom logo, used in the custom_logo partial.
    36033738         *
    36043739         * This method exists because the partial object and context data are passed

  • src/wp-includes/customize/class-wp-customize-header-image-control.php

     
    166166                $height = absint( get_theme_support( 'custom-header', 'height' ) );
    167167                ?>
    168168                <div class="customize-control-content">
    169                         <p class="customizer-section-intro">
     169                        <?php if ( current_theme_supports( 'custom-header', 'video' ) ) {
     170                                echo '<span class="customize-control-title">' . $this->label . '</span>';
     171                        } ?>
     172                        <p class="customizer-section-intro customize-control-description">
    170173                                <?php
    171                                 if ( $width && $height ) {
     174                                if ( current_theme_supports( 'custom-header', 'video' ) ) {
     175                                        _e( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, we recommend matching the size of your video.' );
     176                                } elseif ( $width && $height ) {
    172177                                        /* translators: %s: header size in pixels */
    173178                                        printf( __( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, your theme recommends a header size of %s pixels.' ),
    174179                                                sprintf( '<strong>%s &times; %s</strong>', $width, $height )

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

     
     1(function( window, settings ) {
     2
     3        function wpCustomHeader() {
     4                var handlers = {
     5                        native: {
     6                                test: function( settings ) {
     7                                        var video = document.createElement( 'video' );
     8                                        return video.canPlayType( settings.mimeType );
     9                                },
     10                                callback: nativeHandler
     11                        },
     12                        youtube: {
     13                                test: function( settings ) {
     14                                        return 'video/x-youtube' === settings.mimeType;
     15                                },
     16                                callback: youtubeHandler
     17                        }
     18                };
     19
     20                function initialize() {
     21                        settings.container = document.getElementById( 'wp-custom-header' );
     22
     23                        if ( supportsVideo() ) {
     24                                for ( id in handlers ) {
     25                                        var handler = handlers[ id ];
     26
     27                                        if ( handlers.hasOwnProperty( id ) && handler.test( settings ) ) {
     28                                                handler.callback( settings );
     29                                                break;
     30                                        }
     31                                }
     32                        }
     33                }
     34
     35                function supportsVideo() {
     36                        // @todo Check screen width, user agent, other environment variables, etc.
     37                        return true;
     38                }
     39
     40                return {
     41                        handlers: handlers,
     42                        initialize: initialize,
     43                        supportsVideo: supportsVideo
     44                }
     45        }
     46
     47        function nativeHandler( settings ) {
     48                var video = document.createElement( 'video' );
     49
     50                video.id = 'wp-custom-header-video';
     51                video.autoplay = 'true';
     52                video.loop = 'true';
     53                video.muted = 'true';
     54                video.poster = settings.posterUrl;
     55                video.width = settings.width;
     56                video.height = settings.height;
     57
     58                video.addEventListener( 'click', function() {
     59                        if ( video.paused ) {
     60                                video.play();
     61                        } else {
     62                                video.pause();
     63                        }
     64                });
     65
     66                settings.container.innerHTML = '';
     67                settings.container.appendChild( video );
     68                video.src = settings.videoUrl;
     69        }
     70
     71        function youtubeHandler( settings ) {
     72                // @link http://stackoverflow.com/a/27728417
     73                var VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/,
     74                        videoId = settings.videoUrl.match( VIDEO_ID_REGEX )[1];
     75
     76                function loadVideo() {
     77                        YT.ready(function() {
     78                                var video = document.createElement( 'div' );
     79                                video.id = 'wp-custom-header-video';
     80                                settings.container.innerHTML = '';
     81                                settings.container.appendChild( video );
     82
     83                                new YT.Player( video, {
     84                                        height: settings.height,
     85                                        width: settings.width,
     86                                        videoId: videoId,
     87                                        events: {
     88                                                onReady: function( e ) {
     89                                                        e.target.mute();
     90                                                }
     91                                        },
     92                                        playerVars: {
     93                                                autoplay: 1,
     94                                                controls: 0,
     95                                                disablekb: 1,
     96                                                fs: 0,
     97                                                iv_load_policy: 3,
     98                                                loop: 1,
     99                                                modestbranding: 1,
     100                                                //origin: '',
     101                                                playsinline: 1,
     102                                                rel: 0,
     103                                                showinfo: 0
     104                                        }
     105                                });
     106                        });
     107                }
     108
     109                if ( 'YT' in window ) {
     110                        loadVideo();
     111                } else {
     112                        tag = document.createElement( 'script' );
     113                        tag.src = 'https://www.youtube.com/player_api';
     114                        tag.onload = function () { loadVideo(); };
     115                        document.getElementsByTagName( 'head' )[0].appendChild( tag );
     116                }
     117        }
     118
     119        window.wp = window.wp || {};
     120        window.wp.customHeader = new wpCustomHeader();
     121        document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize, false );
     122
     123        if ( 'customize' in window.wp ) {
     124                wp.customize.selectiveRefresh.bind( 'render-partials-response', function( response ) {
     125                        if ( 'custom_header_settings' in response ) {
     126                                settings = response.custom_header_settings;
     127                        }
     128                });
     129
     130                wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
     131                        if ( 'header_video' === placement.partial.id || 'external_header_video' === placement.partial.id ) {
     132                                window.wp.customHeader.initialize();
     133                        }
     134                });
     135        }
     136
     137})( window, window._wpCustomHeaderSettings || {} );

  • src/wp-includes/script-loader.php

     
    479479        $scripts->add( 'customize-nav-menus', "/wp-admin/js/customize-nav-menus$suffix.js", array( 'jquery', 'wp-backbone', 'customize-controls', 'accordion', 'nav-menu' ), false, 1 );
    480480        $scripts->add( 'customize-preview-nav-menus', "/wp-includes/js/customize-preview-nav-menus$suffix.js", array( 'jquery', 'wp-util', 'customize-preview', 'customize-selective-refresh' ), false, 1 );
    481481
     482        $scripts->add( 'wp-custom-header', "/wp-includes/js/wp-custom-header$suffix.js", array(), false, 1 );
     483
    482484        $scripts->add( 'accordion', "/wp-admin/js/accordion$suffix.js", array( 'jquery' ), false, 1 );
    483485
    484486        $scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 );

  • src/wp-includes/theme.php

     
    12641264                'thumbnail_url' => '',
    12651265                'width'         => get_theme_support( 'custom-header', 'width' ),
    12661266                'height'        => get_theme_support( 'custom-header', 'height' ),
     1267                'video'         => get_theme_support( 'custom-header', 'video' ),
    12671268        );
    12681269        return (object) wp_parse_args( $data, $default );
    12691270}
    … …  
    13111312}
    13121313
    13131314/**
     1315 * Check whether a header video is set or not.
     1316 *
     1317 * @since 4.7.0
     1318 *
     1319 * @see get_header_video_url()
     1320 *
     1321 * @return bool Whether a header video is set or not.
     1322 */
     1323function has_header_video() {
     1324        return (bool) get_header_video_url();
     1325}
     1326
     1327/* Retrieve header video URL for custom header.
     1328 *
     1329 * Uses a local video if present, or falls back to an external video. Returns false if there is no video.
     1330 *
     1331 * @since 4.7.0
     1332 *
     1333 * @return string|false
     1334 */
     1335function get_header_video_url() {
     1336        $id = absint( get_theme_mod( 'header_video' ) );
     1337        $url = esc_url( get_theme_mod( 'external_header_video' ) );
     1338
     1339        if ( ! $id && ! $url ) {
     1340                return false;
     1341        }
     1342
     1343        if ( $id ) {
     1344                // Get the file URL from the attachment ID.
     1345                $url = wp_get_attachment_url( $id );
     1346        }
     1347
     1348        return esc_url_raw( set_url_scheme( $url ) );
     1349}
     1350
     1351/**
     1352 * Display header video URL.
     1353 *
     1354 * @since 4.7.0
     1355 */
     1356function the_header_video_url() {
     1357        $video = get_header_video_url();
     1358        if ( $video ) {
     1359                echo esc_url( $video );
     1360        }
     1361}
     1362
     1363/**
     1364 * Retrieve header video settings.
     1365 *
     1366 * @since 4.7.0
     1367 *
     1368 * @return array
     1369 */
     1370function get_header_video_settings() {
     1371        $header     = get_custom_header();
     1372        $video_url  = get_header_video_url();
     1373        $video_type = wp_check_filetype( $video_url, wp_get_mime_types() );
     1374
     1375        $settings = array(
     1376                'mimeType'  => '',
     1377                'posterUrl' => get_header_image(),
     1378                'videoUrl'  => $video_url,
     1379                'width'     => absint( $header->width ),
     1380                'height'    => absint( $header->height ),
     1381        );
     1382
     1383        if ( preg_match( '#^https?://(?:www\.)?(?:youtube\.com/watch|youtu\.be/)#', $video_url ) ) {
     1384                $settings['mimeType'] = 'video/x-youtube';
     1385        } elseif ( preg_match( '#^https?://(.+\.)?vimeo\.com/.*#', $video_url ) ) {
     1386                $settings['mimeType'] = 'video/x-vimeo';
     1387        } elseif ( ! empty( $video_type['type'] ) ) {
     1388                $settings['mimeType'] = $video_type['type'];
     1389        }
     1390
     1391        return $settings;
     1392}
     1393
     1394/**
     1395 * Display the video and image markup for a custom header.
     1396 *
     1397 * @since 4.7.0
     1398 */
     1399function the_custom_header() {
     1400        $header = get_custom_header();
     1401
     1402        printf(
     1403                '<div id="wp-custom-header">%s</div>',
     1404                get_header_image_tag()
     1405        );
     1406
     1407        if ( $header->video && ( has_header_video() || is_customize_preview() ) ) {
     1408                wp_enqueue_script( 'wp-custom-header' );
     1409                wp_localize_script( 'wp-custom-header', '_wpCustomHeaderSettings', get_header_video_settings() );
     1410        }
     1411}
     1412
     1413/**
    13141414 * Retrieve background image for custom background.
    13151415 *
    13161416 * @since 3.0.0
    … …  
    17061806                                'wp-head-callback' => '',
    17071807                                'admin-head-callback' => '',
    17081808                                'admin-preview-callback' => '',
     1809                                'video' => false,
    17091810                        );
    17101811
    17111812                        $jit = isset( $args[0]['__jit'] );