Topic: Responsive Cover Video Drops out on Mobile Viewports

surface2air free asked 5 years ago

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: Any help would be great! Thank you :] Eric Seattle, Washington    

Ollie Vincent pro answered 5 years ago



There is different code to use a background video that responds like a background image. This is a PRO component (I see you are not a PRO member?). Otherwise I suggest you need to find some third party javaScript to help you.

Otherwise you could try using media queries to make the video different widths on different devices, but this would be a hack and very messy.


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes