From 8397b5023f5e7182e9a990b29c776f4c6a49f05d Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Sun, 4 Dec 2016 19:23:20 +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. git-svn-id: https://develop.svn.wordpress.org/branches/4.7@39485 602fd350-edb4-49c9-b593-d223f7449a82 --- .../themes/twentyseventeen/style.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css index 74a4715209..f69f53ea33 100644 --- a/src/wp-content/themes/twentyseventeen/style.css +++ b/src/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);