I have a project where I am integrating a responsive video (.MP4, .OGV and .WebM formats) as a Background Cover on a home page, but the video drops out on mobile devices (Safari and Chrome per iOS 11 on iPhone and iPad). I have not tested on Android devices.
CSS:
/*------------------------------------------------------------------------*/
/*-- Background Video --*/
/*------------------------------------------------------------------------*/
.jumbotron {
background-color: #000000;
background-size:cover;
object-fit: cover;
position: relative;
z-index: 0;
height:100%;
/*height:100vh;*/
/*display: flex;
flex-direction: column;
align-content: center;
margin-bottom:0;
*/
/*z-index:-2;*/
}
#video-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 1;
/*z-index: -1;*/
height:100vh;
width:100%;
}
#feature-intro {
position:relative;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 2;
}
And HTML:
<div class="jumbotron">
<video id="video-background" preload="" muted="" autoplay="" loop="">
<source src="video/westlake.mp4" type="video/mp4" />
<source src="video/westlake.theora.ogv" type="video/ogv" />
<source src="video/westlake.webm" type="video/webm" />
</video>
<div class="flex-center" id="feature-intro">
<a name="welcome" id="welcome"></a>
<ul>
<li>
<h4 class="display-4 display-heading wow fadeInDown" data-wow-delay="0.2s">In the Absence of Natural Light</h4></li>
<li>
<span class="h4 wow fadeInDown">Seattle, Washington<br /><em>Estimated time of opening, first week of April 2018</em></span>
</li>
<li>
<a class="btn btn-lg btn-outline-white" href="exhibitions/absence.htm"><i class="fa fa-clone left"></i> View project</a>
</li>
</ul>
</div>
</div>
Demo:
http://gridinteractive.com/iole/default.htm#exhibitions
Any help would be great! Thank you :]
Eric
Seattle, Washington
