From 082fa8f5ada73986a3493e143fd83e297a782e1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Helen=20Hou-Sand=C3=AD?= <helen.y.hou@gmail.com>
Date: Sun, 4 Dec 2016 19:24:33 +0000
Subject: [PATCH] Twenty Seventeen: Improve display of video header and header
 image in modern browsers

The theme uses a hack to help the video header and header image fill the available space. This centers around `max-width: 1000%;`. It causes visual issues (zooming of the header video or image) for all users though.

This fixes that with CSS Features Queries. The hack remains for browsers that don't support Feature Queries  and `object-fit`. Browsers that do support both get a better experience with a more reliable styling of the video and image header container.

Props laurelfulford, peterwilsoncc.

Fixes #39035 for the 4.7 branch.

Built from https://develop.svn.wordpress.org/branches/4.7@39485


git-svn-id: http://core.svn.wordpress.org/branches/4.7@39425 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-content/themes/twentyseventeen/style.css | 18 ++++++++++++++++++
 wp-includes/version.php                     |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/wp-content/themes/twentyseventeen/style.css b/wp-content/themes/twentyseventeen/style.css
index 74a4715209..f69f53ea33 100644
--- a/wp-content/themes/twentyseventeen/style.css
+++ b/wp-content/themes/twentyseventeen/style.css
@@ -1690,6 +1690,24 @@ body:not(.title-tagline-hidden) .site-branding-text {
 	transform: translateX(-50%) translateY(-50%);
 }
 
+/* For browsers that support 'object-fit' */
+@supports ( object-fit: cover ) {
+	.has-header-image .custom-header-media img,
+	.has-header-video .custom-header-media video,
+	.has-header-video .custom-header-media iframe {
+		height: 100%;
+		left: 0;
+		-o-object-fit: cover;
+		object-fit: cover;
+		top: 0;
+		-ms-transform: none;
+		-moz-transform: none;
+		-webkit-transform: none;
+		transform: none;
+		width: 100%;
+	}
+}
+
 .wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */
 	background-color: rgba(34, 34, 34, 0.5);
 	border: 1px solid rgba(255, 255, 255, 0.6);
diff --git a/wp-includes/version.php b/wp-includes/version.php
index f4d91bbb18..f1509902b4 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-RC2-39484';
+$wp_version = '4.7-RC2-39485';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.