WordPress.org

Make WordPress Core

Changeset 39483


Ignore:
Timestamp:
12/04/16 19:15:02 (5 months 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyseventeen/style.css

    r39482 r39483  
    16911691} 
    16921692 
     1693/* For browsers that support 'object-fit' */ 
     1694@supports ( object-fit: cover ) { 
     1695    .has-header-image .custom-header-media img, 
     1696    .has-header-video .custom-header-media video, 
     1697    .has-header-video .custom-header-media iframe { 
     1698        height: 100%; 
     1699        left: 0; 
     1700        -o-object-fit: cover; 
     1701        object-fit: cover; 
     1702        top: 0; 
     1703        -ms-transform: none; 
     1704        -moz-transform: none; 
     1705        -webkit-transform: none; 
     1706        transform: none; 
     1707        width: 100%; 
     1708    } 
     1709} 
     1710 
    16931711.wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */ 
    16941712    background-color: rgba(34, 34, 34, 0.5); 
Note: See TracChangeset for help on using the changeset viewer.