Changeset 39483

Timestamp:

12/04/2016 07:15:02 PM (8 years ago)

Author:

davidakennedy

Message:

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.

File:

• trunk/src/wp-content/themes/twentyseventeen/style.css (modified) (1 diff)

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

@@ -1691 +1691 @@
 }
 
+/* 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);