Themes: Enable video in custom headers.

This adds the ability for themes to add support for videos in custom headers
by passing `'video' => true` as an argument when adding theme support for
custom headers.

Custom video headers are managed through the “Header Visuals” (i.e. “Header Image”)
panel in the Customizer where you can select a video from the media library or set a
URL to an external video (YouTube for now) for use in custom headers.

This introduces several new functions:

`has_header_video()` – Check whether a header video is set or not.
`get_header_video_url()` – Retrieve header video URL for custom header.
`the_header_video_url()` – Display header video URL.
`get_header_video_settings()` – Retrieve header video settings.
`has_custom_header()` – Check whether a custom header is set or not.
`get_custom_header_markup()` – Retrieve the markup for a custom header.
`the_custom_header_markup()` – Print the markup for a custom header.

And a new file, `wp-includes/js/wp-custom-header.js` that handles loading videos
in custom headers.

This also enables video headers in the Twenty Seventeen and Twenty Fourteen themes.

Props davidakennedy, celloexpressions, bradyvercher, laurelfulford, joemcgill.
Fixes #38172.

git-svn-id: https://develop.svn.wordpress.org/trunk@38985 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -434,7 +434,7 @@ function twentyfourteen_body_classes( $classes ) {
 		$classes[] = 'group-blog';
 	}
 
-	if ( get_header_image() ) {
+	if ( get_header_image() || function_exists( 'has_header_video' ) && has_header_video() ) {
 		$classes[] = 'header-image';
 	} elseif ( ! in_array( $GLOBALS['pagenow'], array( 'wp-activate.php', 'wp-signup.php' ) ) ) {
 		$classes[] = 'masthead-fixed';

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

@@ -32,7 +32,11 @@
 
 <body <?php body_class(); ?>>
 <div id="page" class="hfeed site">
-	<?php if ( get_header_image() ) : ?>
+	<?php if ( function_exists( 'has_header_video' ) && has_header_video() ) : ?>
+		<div id="site-header">
+			<?php the_custom_header_markup(); ?>
+		</div>
+	<?php elseif ( get_header_image() ) : ?>
 	<div id="site-header">
 		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
 			<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

@@ -40,6 +40,7 @@ function twentyfourteen_custom_header_setup() {
 		'width'                  => 1260,
 		'height'                 => 240,
 		'flex-height'            => true,
+		'video'                  => true,
 		'wp-head-callback'       => 'twentyfourteen_header_style',
 		'admin-head-callback'    => 'twentyfourteen_admin_header_style',
 		'admin-preview-callback' => 'twentyfourteen_admin_header_image',

src/wp-content/themes/twentyfourteen/inc/customizer.php

@@ -16,9 +16,11 @@
  */
 function twentyfourteen_customize_register( $wp_customize ) {
 	// Add postMessage support for site title and description.
-	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
-	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
-	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
+	$wp_customize->get_setting( 'blogname' )->transport          = 'postMessage';
+	$wp_customize->get_setting( 'blogdescription' )->transport   = 'postMessage';
+	$wp_customize->get_setting( 'header_textcolor' )->transport  = 'postMessage';
+	$wp_customize->get_setting( 'header_image' )->transport      = 'postMessage';
+	$wp_customize->get_setting( 'header_image_data' )->transport = 'postMessage';
 
 	if ( isset( $wp_customize->selective_refresh ) ) {
 		$wp_customize->selective_refresh->add_partial( 'blogname', array(

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

@@ -95,15 +95,20 @@
 		 */
 		if ( _window.width() > 781 ) {
 			var mastheadHeight = $( '#masthead' ).height(),
-				toolbarOffset, mastheadOffset;
+				mastheadOffset;
 
 			if ( mastheadHeight > 48 ) {
 				body.removeClass( 'masthead-fixed' );
 			}
 
+			mastheadOffset = $( '#site-header' ).height();
+
 			if ( body.is( '.header-image' ) ) {
-				toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
-				mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
+
+				// Recaculate the header height when a custom header loads.
+				$( 'body' ).on( 'wp-custom-header-video-loaded', function() {
+					mastheadOffset = $( '#site-header' ).height();
+				} );
 
 				_window.on( 'scroll.twentyfourteen', function() {
 					if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
@@ -112,6 +117,13 @@
 						body.removeClass( 'masthead-fixed' );
 					}
 				} );
+
+				// Update masthead offset after a selective refresh.
+				if ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh ) {
+					wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function() {
+						mastheadOffset = $( '#site-header' ).height();
+					} );
+				}
 			}
 		}
 

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

@@ -88,6 +88,7 @@ canvas,
 video {
 	display: inline-block;
 	max-width: 100%;
+	height: auto;
 }
 
 html {
@@ -608,6 +609,11 @@ video {
 	max-width: 100%;
 }
 
+#wp-custom-header iframe,
+#wp-custom-header video {
+	margin-bottom: -8px;
+}
+
 p > embed,
 p > iframe,
 p > object,

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

@@ -68,6 +68,12 @@ img {
 	padding: 45px 0;
 }
 
+.has-header-image .custom-header-image img,
+.has-header-image .custom-header-image video {
+	left: 0;
+	top: 0;
+}
+
 .site-title {
 	font-size: 36px;
 	font-weight: bolder;

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

@@ -14,31 +14,32 @@
 
 ?>
 
-	</div><!-- #content -->
+		</div><!-- #content -->
 
-	<footer id="colophon" class="site-footer" role="contentinfo">
-		<div class="wrap">
-			<?php
-			get_template_part( 'template-parts/footer/footer', 'widgets' );
+		<footer id="colophon" class="site-footer" role="contentinfo">
+			<div class="wrap">
+				<?php
+				get_template_part( 'template-parts/footer/footer', 'widgets' );
 
-			if ( has_nav_menu( 'social' ) ) : ?>
-				<nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
-					<?php
-						wp_nav_menu( array(
-							'theme_location' => 'social',
-							'menu_class'     => 'social-links-menu',
-							'depth'          => 1,
-							'link_before'    => '<span class="screen-reader-text">',
-							'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
-						) );
-					?>
-				</nav><!-- .social-navigation -->
-			<?php endif;
+				if ( has_nav_menu( 'social' ) ) : ?>
+					<nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
+						<?php
+							wp_nav_menu( array(
+								'theme_location' => 'social',
+								'menu_class'     => 'social-links-menu',
+								'depth'          => 1,
+								'link_before'    => '<span class="screen-reader-text">',
+								'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
+							) );
+						?>
+					</nav><!-- .social-navigation -->
+				<?php endif;
 
-			get_template_part( 'template-parts/footer/site', 'info' );
-			?>
-		</div><!-- .wrap -->
-	</footer><!-- #colophon -->
+				get_template_part( 'template-parts/footer/site', 'info' );
+				?>
+			</div><!-- .wrap -->
+		</footer><!-- #colophon -->
+	</div><!-- .site-content-contain -->
 </div><!-- #page -->
 <?php wp_footer(); ?>
 

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

@@ -49,4 +49,5 @@
 	endif;
 	?>
 
-	<div id="content" class="site-content">
+	<div class="site-content-contain">
+		<div id="content" class="site-content">

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

@@ -39,6 +39,7 @@ function twentyseventeen_custom_header_setup() {
 		'width'              => 2000,
 		'height'             => 1200,
 		'flex-height'        => true,
+		'video'              => true,
 		'wp-head-callback'   => 'twentyseventeen_header_style',
 	) ) );
 

src/wp-content/themes/twentyseventeen/inc/customizer.php

@@ -13,9 +13,11 @@
  * @param WP_Customize_Manager $wp_customize Theme Customizer object.
  */
 function twentyseventeen_customize_register( $wp_customize ) {
-	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
-	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
-	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
+	$wp_customize->get_setting( 'blogname' )->transport          = 'postMessage';
+	$wp_customize->get_setting( 'blogdescription' )->transport   = 'postMessage';
+	$wp_customize->get_setting( 'header_textcolor' )->transport  = 'postMessage';
+	$wp_customize->get_setting( 'header_image' )->transport      = 'postMessage';
+	$wp_customize->get_setting( 'header_image_data' )->transport = 'postMessage';
 
 	$wp_customize->selective_refresh->add_partial( 'blogname', array(
 		'selector' => '.site-title a',

src/wp-content/themes/twentyseventeen/inc/template-functions.php

@@ -35,7 +35,7 @@ function twentyseventeen_body_classes( $classes ) {
 	}
 
 	// Add a class if there is a custom header.
-	if ( has_header_image() ) {
+	if ( has_header_image() || has_header_video() && is_front_page() ) {
 		$classes[] = 'has-header-image';
 	}
 

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

@@ -1314,6 +1314,7 @@ a:hover .nav-title,
 	border-top: 1px solid #eee;
 	font-size: 16px;
 	font-size: 1rem;
+	position: relative;
 }
 
 .navigation-top .wrap {
@@ -1555,8 +1556,10 @@ body {
 
 .site-branding {
 	padding: 1em 0;
+	position: relative;
 	-webkit-transition: margin-bottom 0.2s;
 	transition: margin-bottom 0.2s;
+	z-index: 3;
 }
 
 .site-branding a {
@@ -1650,15 +1653,13 @@ body:not(.title-tagline-hidden) .site-branding-text {
 }
 
 .custom-header-image {
-	background-position: center center;
-	background-repeat: no-repeat;
-	-webkit-background-size: cover;
-	background-size: cover;
 	bottom: 0;
 	left: 0;
+	overflow: hidden;
 	position: absolute;
 	right: 0;
 	top: 0;
+	width: 100%;
 }
 
 .custom-header-image:before {
@@ -1674,10 +1675,35 @@ body:not(.title-tagline-hidden) .site-branding-text {
 	left: 0;
 	position: absolute;
 	right: 0;
+	z-index: 2;
 }
 
-.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image {
-	background-position: center bottom;
+.has-header-image .custom-header-image img,
+.has-header-image .custom-header-image video,
+.has-header-image .custom-header-image iframe {
+	position: fixed;
+	height: auto;
+	left: 50%;
+	max-width: 1000%;
+	min-height: 100%;
+	min-width: 100%;
+	min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
+	width: auto;
+	top: 50%;
+	-ms-transform: translateX(-50%) translateY(-50%);
+	-moz-transform: translateX(-50%) translateY(-50%);
+	-webkit-transform: translateX(-50%) translateY(-50%);
+	transform: translateX(-50%) translateY(-50%);
+}
+
+.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img {
+	bottom: 0;
+	position: absolute;
+	top: auto;
+	-ms-transform: translateX(-50%) translateY(0);
+	-moz-transform: translateX(-50%) translateY(0);
+	-webkit-transform: translateX(-50%) translateY(0);
+	transform: translateX(-50%) translateY(0);
 }
 
 body:not(.has-header-image) .custom-header-image {
@@ -1777,6 +1803,11 @@ body:not(.has-header-image) .custom-header-image {
 ## Regular Content
 --------------------------------------------------------------*/
 
+.site-content-contain {
+	background-color: #fff;
+	position: relative;
+}
+
 .site-content {
 	padding: 2.5em 0 0;
 }
@@ -2642,7 +2673,8 @@ h2.widget-title {
 # Media
 --------------------------------------------------------------*/
 
-img {
+img,
+video {
 	height: auto; /* Make sure images are scaled correctly. */
 	max-width: 100%; /* Adhere to container width. */
 }
@@ -3287,7 +3319,6 @@ article.panel-placeholder {
 
 	.has-header-image.twentyseventeen-front-page .custom-header,
 	.has-header-image.home.blog .custom-header {
-		display: block;
 		min-height: 0;
 	}
 
@@ -3296,6 +3327,12 @@ article.panel-placeholder {
 		position: relative;
 	}
 
+	.twentyseventeen-front-page.has-header-image .custom-header-image,
+	.home.blog.has-header-image .custom-header-image {
+		height: 0;
+		position: relative;
+	}
+
 	.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image {
 		bottom: 0;
 		height: auto;
@@ -3305,13 +3342,6 @@ article.panel-placeholder {
 		top: 0;
 	}
 
-	.twentyseventeen-front-page.has-header-image .custom-header-image,
-	.home.blog.has-header-image .custom-header-image {
-		height: 0;
-		padding-top: 66%;
-		position: relative;
-	}
-
 	.custom-logo-link {
 		padding-right: 2em;
 	}
@@ -3591,7 +3621,8 @@ article.panel-placeholder {
 		height: 1200px;
 		height: 100vh;
 		max-height: 100%;
-		padding: 10% 0;
+		overflow: hidden;
+		/* padding: 10% 0; */
 	}
 
 	.twentyseventeen-front-page.has-header-image .custom-header-image:before,
@@ -3938,11 +3969,6 @@ article.panel-placeholder {
 
 @media screen and ( min-width: 55em ) {
 
-	.twentyseventeen-front-page.has-header-image .custom-header-image,
-	.home.blog.has-header-image .custom-header-image {
-		background-attachment: fixed;
-	}
-
 	.panel-image {
 		background-attachment: fixed;
 	}

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

@@ -14,12 +14,17 @@
 	$header_image = get_header_image();
 
 	// Check if Custom Header image has been added.
-	if ( ! empty( $header_image ) ) : ?>
+	if ( has_custom_header() ) :
+	?>
 
-		<div class="custom-header-image" style="background-image: url(<?php echo esc_url( $header_image ); ?>)"></div>
+		<?php // Output the full custom header - video and/or image fallback. ?>
+		<div class="custom-header-image">
+			<?php the_custom_header_markup(); ?>
+		</div>
 		<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
 
 	<?php else : ?>
+
 		<?php // Otherwise, show a blank header. ?>
 		<div class="custom-header-simple">
 			<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>