javascript - Bootstrap video jumbotron - Stack Overflow

admin管理员组

文章数量:1294687

I'm trying to get a video to cover a bootstrap Jumbotron with no success. This seems like a very simple thing to do, but everything I try seems to fail.

I've tried the solution posted here with no success. I've also tried just setting the position of the video to absolute, and setting all sides to 0, but that doesn't seem to work either. What am I doing wrong?

This shows what is going on: /

.jumbotron{
  position: relative;
  
  /* Tried setting the height. Didnt work either */
  /* height: 200px; */
}

#video-background { 
  position: absolute;
  bottom: 50%; 
  right: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}

<script src="//code.jquery/jquery-1.11.3.min.js"></script>
<script src=".3.6/js/bootstrap.min.js"></script>
<link href=".3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="jumbotron">
  <video id="video-background" preload muted autoplay loop>
    <source src=".mp4" type="video/mp4">
    <source src=".ogg" type="video/ogg">
  </video>
  <div class="container">
    Hello World
  </div>
</div>

I'm trying to get a video to cover a bootstrap Jumbotron with no success. This seems like a very simple thing to do, but everything I try seems to fail.

I've tried the solution posted here with no success. I've also tried just setting the position of the video to absolute, and setting all sides to 0, but that doesn't seem to work either. What am I doing wrong?

This shows what is going on: https://jsfiddle/kae4q601/

.jumbotron{
  position: relative;
  
  /* Tried setting the height. Didnt work either */
  /* height: 200px; */
}

#video-background { 
  position: absolute;
  bottom: 50%; 
  right: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}

<script src="//code.jquery./jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="jumbotron">
  <video id="video-background" preload muted autoplay loop>
    <source src="http://www.w3schools./html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools./html/mov_bbb.ogg" type="video/ogg">
  </video>
  <div class="container">
    Hello World
  </div>
</div>

• javascript
• html
• css
• twitter-bootstrap
• video

Share Improve this question Follow edited May 23, 2017 at 12:15 CommunityBot 111 silver badge asked Jan 6, 2016 at 2:04 AustnealAustneal 2311 gold badge22 silver badges55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Looks like you've got a lot of unnecessary css going on. To start I would definitely define the jumbotron z-index in order to keep the gray padding in the background.

.jumbotron{
  position: relative;
  z-index:-101;
}

Next some cleaner simpler code for the video background like so:

    #video-background { 
      position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: -100;
        width:100%;
}

Here's the fiddle https://jsfiddle/kae4q601/5/ Let me know if this is what you were trying to achieve.

Since .jumbotron has a grey background, setting the the video background to z-index: -1000; will make the video display behind the grey background, thus invisible. Also, when making video backgrounds cover, the parent needs to have overflow:hidden, not the video itself.

CSS:

.jumbotron{
   position: relative;
   overflow: hidden;
   height: 200px;
}

.container {
  position: relative;
  color: #ffffff;
  z-index: 2; /* Show content above video */
}

#video-background{ 
  position: absolute;
  height: auto;
  width: auto;
  min-height: 100%;
  min-width: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
}

Here is a working fiddle: https://jsfiddle/kae4q601/15/

本文标签： javascriptBootstrap video jumbotronStack Overflow