sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Twenty Seventeen: Improve display of video header and header image in modern browsers

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@39483 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
David A. Kennedy 2016-12-04 19:15:02 +00:00
parent 53582841f9
commit d69f3f4db7
1 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/wp-content/themes/twentyseventeen/style.css
View File

@ -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);