.mp4 format and minimize its file size for best results. Your theme recommends dimensions of %s pixels.' ),
+ sprintf( '%s × %s', $width, $height )
+ );
+ } elseif ( $width ) {
+ /* translators: %s: header width in pixels */
+ $control_description = sprintf( __( 'Upload your video in .mp4 format and minimize its file size for best results. Your theme recommends a width of %s pixels.' ),
+ sprintf( '%s', $width )
+ );
+ } else {
+ /* translators: %s: header height in pixels */
+ $control_description = sprintf( __( 'Upload your video in .mp4 format and minimize its file size for best results. Your theme recommends a height of %s pixels.' ),
+ sprintf( '%s', $height )
+ );
+ }
+ } else {
+ $title = __( 'Header Image' );
+ $description = '';
+ $control_description = '';
+ }
+
$this->add_section( 'header_image', array(
- 'title' => __( 'Header Image' ),
+ 'title' => $title,
+ 'description' => $description,
'theme_supports' => 'custom-header',
'priority' => 60,
) );
+ $this->add_setting( 'header_video', array(
+ 'theme_supports' => array( 'custom-header', 'video' ),
+ 'transport' => 'postMessage',
+ 'validate_callback' => array( $this, '_validate_header_video' ),
+ ) );
+
$this->add_setting( new WP_Customize_Filter_Setting( $this, 'header_image', array(
'default' => get_theme_support( 'custom-header', 'default-image' ),
'theme_supports' => 'custom-header',
@@ -3239,8 +3273,22 @@
'theme_supports' => 'custom-header',
) ) );
+ $this->add_control( new WP_Customize_Media_Control( $this, 'header_video', array(
+ 'theme_supports' => array( 'custom-header', 'video' ),
+ 'label' => __( 'Header Video' ),
+ 'description' => $control_description,
+ 'section' => 'header_image',
+ 'mime_type' => 'video',
+ ) ) );
+
$this->add_control( new WP_Customize_Header_Image_Control( $this ) );
+ $this->selective_refresh->add_partial( 'header_video', array(
+ 'selector' => '#wp-custom-header-video',
+ 'render_callback' => 'get_header_video_tag',
+ 'settings' => array( 'header_video', 'header_image' ), // The image is used as a video fallback here.
+ ) );
+
/* Custom Background */
$this->add_section( 'background_image', array(
@@ -3595,6 +3643,27 @@
}
/**
+ * Callback for validating the header_video value.
+ *
+ * Ensures that the selected video is less than 8MB and provides an error message.
+ *
+ * @since 4.7.0
+ *
+ * @param string $color
+ * @return mixed
+ */
+ public function _validate_header_video( $validity, $value ) {
+ $video = get_attached_file( absint( $value ) );
+ if ( $video ) {
+ $size = filesize( $video );
+ if ( 8 < $size / pow( 1024, 2 ) ) { // Check whether the size is larger than 8MB.
+ $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.' ) );
+ }
+ }
+ return $validity;
+ }
+
+ /**
* Callback for rendering the custom logo, used in the custom_logo partial.
*
* This method exists because the partial object and context data are passed
Index: src/wp-includes/customize/class-wp-customize-header-image-control.php
===================================================================
--- src/wp-includes/customize/class-wp-customize-header-image-control.php (revision 38866)
+++ src/wp-includes/customize/class-wp-customize-header-image-control.php (working copy)
@@ -166,9 +166,14 @@
$height = absint( get_theme_support( 'custom-header', 'height' ) );
?>
+ ' . $this->label . ''; + } ?> +
Add new image, we recommend matching the size of your video.' );
+ } elseif ( $width && $height ) {
/* translators: %s: header size in pixels */
printf( __( 'While you can crop images to your liking after clicking Add new image, your theme recommends a header size of %s pixels.' ),
sprintf( '%s × %s', $width, $height )
Index: src/wp-includes/theme.php
===================================================================
--- src/wp-includes/theme.php (revision 38866)
+++ src/wp-includes/theme.php (working copy)
@@ -1264,6 +1264,7 @@
'thumbnail_url' => '',
'width' => get_theme_support( 'custom-header', 'width' ),
'height' => get_theme_support( 'custom-header', 'height' ),
+ 'video' => get_theme_support( 'custom-header', 'video' ),
);
return (object) wp_parse_args( $data, $default );
}
@@ -1311,6 +1312,152 @@
}
/**
+ * Check whether a header video is set or not.
+ *
+ * @since 4.7.0
+ *
+ * @see get_header_video_url()
+ *
+ * @return bool Whether a header video is set or not.
+ */
+function has_header_video() {
+ return (bool) get_header_video_url();
+}
+
+/* Retrieve header video URL for custom header.
+*
+* @since 4.7.0
+*
+* @return string|false
+*/
+function get_header_video_url() {
+ $id = absint( get_theme_mod( 'header_video' ) );
+
+ if ( ! $id ) {
+ return false;
+ }
+
+ if ( $id ) {
+ // We have an attachment ID, need the full URL
+ $url = wp_get_attachment_url( $id );
+ }
+
+ return esc_url_raw( set_url_scheme( $url ) );
+}
+
+/**
+ * Create video tag markup for a custom header video.
+ *
+ * @since 4.7.0
+ *
+ * @param array $attr Optional. Additional attributes for the image tag. Can be used
+ * to override the default attributes. Default empty.
+ * @return string HTML image element markup or empty string on failure.
+ */
+function get_header_video_tag( $attr = array() ) {
+ $header = get_custom_header();
+ $video = get_header_video_url();
+ $image = get_header_image();
+
+ if ( empty( $video ) ) {
+ if ( is_customize_preview() ) { // If there was a video an it was removed, fall back to an image.
+ if ( ! empty( $image ) ) {
+ return get_header_image_tag();
+ }
+ }
+ return '';
+ }
+
+ $width = absint( $header->width );
+ $height = absint( $header->height );
+
+ $attr = wp_parse_args(
+ $attr,
+ array(
+ 'src' => get_header_video_url(),
+ 'width' => $width,
+ 'height' => $height,
+ 'controls' => '',
+ 'autoplay' => '',
+ 'loop' => '',
+ 'muted' => '',
+ )
+ );
+
+ // Use the header image as poster attribute and video fallback.
+ if ( ! empty( $image ) ) {
+ $attr['poster'] = $header->url;
+ $content = get_header_image_tag();
+ } else {
+ $content = __( 'Your browser cannot play this video.' );
+ }
+
+ $attr = array_map( 'esc_attr', $attr );
+ $html = '