How to fit video 100 width 100 height in bootstrap without horizontal scroll

Question

I want to make a personal website but couldn't fit the video in my page. Unless I put max-height:100% i can still scroll horizontally. Or I disable absolute position, but then header wasn't able to show on the top of video. I used

overflow-x: hidden

but it didn't work. What is the best way to put video as background and still be able to put text on the top of it?

Thank you very much!!

   video {
       position: absolute;
       z-index: -99;
       /*min-width: 100%;
       min-height: 100%;*/
       width: 100%;
       height: 100%;
       background: url(../img/header-bg.jpg) no-repeat 0 0;
       background-attachment: scroll;
       background-position: center center;
       background-repeat: none;
       background-size: 100% auto;
       -o-background-size: cover;
       -webkit-background-size: cover;
       -moz-background-size: cover;
   }

   header {
           text-align: center;
           color: #fff;
           height: 100vh;
           /*background-attachment: scroll;
           background-image: url(../img/header-bg.jpg);
           background-position: center center;
           background-repeat: none;
           -webkit-background-size: cover;
           -moz-background-size: cover;
           background-size: cover;
           -o-background-size: cover;*/
   }





<!-- Background Video -->
<video autoplay loop poster="data:image/gif,AAAA">
    <source src="./ocean.mp4" type="video/mp4">
    <source src="./ocean.ogv" type="video/ogv">
    <source src="./ocean.webm" type="video/webm">
</video>

   <!-- Header -->
   <header>
       <div class="container">
           <div class="intro-text">
               <div class="intro-lead-in">Welcome To Our Studio!</div>
               <div class="intro-heading">IT'S NICE TO MEET YOU</div>
               <a href="#services" class="page-scroll btn btn-xl">TELL ME MORE</a>
           </div>
       </div>
   </header>

possible duplicate of [simulate background-size:cover on – Jun 18 '15 at 01:25 — , Jun 18 '15 at 01:25

score 0 · Accepted Answer · answered Jun 18 '15 at 01:17

Use the Grid System of Bootstrap.

Try adding :

<body>
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <!-- Background Video -->
            <video autoplay loop poster="data:image/gif,AAAA">
                <source src="./ocean.mp4" type="video/mp4">
                <source src="./ocean.ogv" type="video/ogv">
                <source src="./ocean.webm" type="video/webm">
            </video>
        </div>
    </div>
</body>

score 0 · Answer 2 · answered Jun 18 '15 at 02:55

Taking the limited code you have here and what you want to do, take a look at this to see if can help you get started.

I gave a the header part some color background to help see this area. You can remove the class if you do not need it there.

<!DOCTYPE html>
<html lang="en">
<body>

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
    

.header-block {
  margin-top: 2%;
  margin-bottom: 2%;  
}
.intro-header {
  font-family: 'Muli', sans-serif !important;
  font-weight: 300;
  font-style: italic;
  font-size: 74px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
video {
  width: 100% !important;
  height: auto !important;
  z-index: -100; 
}
.video-holder {
  position: absolute;
  width: 100%;
  margin-bottom:100%;   
  top: 0;
  left: 0;
  opacity: 0.8;
  z-index: -100;  
}

.gradient-overlay {
  margin-top: 2%;  
  width: 100%;
  height: 25%;
  content: '';
  background: rgba(90,90,190,0.8);
  opacity: 0.8;
  z-index: 1;
}


</style>


<div class="container ">
  <div class="row-fluid">
   <div class="video-holder">
    <video autoplay loop muted>
            <source src="http://www.w3schools.com/tags/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
            <source src="./ocean.ogv" type="video/ogv">
            <source src="./ocean.webm" type="video/webm"> 
    </video>
   </div>
  </div>
   <div class="container text-center gradient-overlay">
     <div class="row">
      <div class="col-xs-12 header-block">
       <div class="intro-header">Welcome To Our Studio!</div>
                <div class="intro-heading"><h3>IT'S NICE TO MEET YOU</h3></div>
               <a href="#services" class="page-scroll btn btn-xl bg-primary">TELL ME MORE</a>
      </div>
     </div>
   </div>
</div>


<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

How to fit video 100 width 100 height in bootstrap without horizontal scroll

2 Answers2