Hi, I have been trying to fix this issue for quite sometime now also.
https://cocoinnovations.com/
Header video is just not playing on smaller devices (i.e. mobiles).
I did however use CSS which made default ‘static’ image smaller on mobile on portrait orientation scale/smaller BUT there is a large gap between the bottom of the static image and following content. Here is CSS for this mentioned resolution (“scale” static image):
@media screen and (max-width: 480px) {
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe,
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
height: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}
}
I look forward to hearing a solution in relation to:
1). Playing & Scaling Header video in Mobile and Tablets; and
2). Hopefully alleviate large unsightly gaps surrounding video.
