Bootstrap Video Background Not Responsive (Not Scaling)

Question

I'm trying to use bootstrap to make my personal website with a video in the background. When I make the browser window smaller, the video, title placeholder, and buttons all do not scale (not responsive). I don't know what's wrong. Any help would be useful. Thanks so much!

Here's my HTML code:

  <div class = "header-container">
        <div class = "video-container">
                <video preload = "true" autoplay loop volume = "0"> 
                <source src = "videos/main.mp4" type = "video/mp4" >
                </video>
        </div>
        <h3 class="main"> 
            Title Placeholder 
                <div class="col-md-5 text-center col-sm-offset-3"> 
                        <a href="#services" class="btn btn-lg outline col-sm-offset-2">Services</a>
                        <a href="#about" class="btn btn-lg">About</a>
                        <a href="#contact" class="btn btn-primary btn-lg outline">Contact</a>
                </div>
        </h3>
  </div>

Here's my CSS code:

.header-container {
    width: 100%;
    height: 700px;
    border-left: none;
    border-right: none;
    position: absolute;
    padding: 10px;
    overflow: hidden;
}

.video-container {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 700px;
    width: 100%;
    overflow: hidden;
}

Possible duplicate of [Bootstrap 3 - Responsive mp4-video](http://stackoverflow.com/questions/26040136/bootstrap-3-responsive-mp4-video) — Madan Bhandari, Dec 15 '15 at 06:56
@Harold Finch use that link : http://jsfiddle.net/ and create example and share updated link with us. — Sunil Gehlot, Dec 15 '15 at 06:56
@SunilGehlot Not sure if I did it correctly. The video is local so I substituted it with one from the internet but the bootstrap buttons and title are not showing up http://jsfiddle.net/suLnu1r3/ — Kevin Wei, Dec 15 '15 at 07:03
@MadanBhandari I placed another embed class outside of the video tag, but the text and buttons are still not responsive. I've tried to enclose the text and buttons in an embed class but to no avail — Kevin Wei, Dec 15 '15 at 07:07

score 1 · Answer 1 · answered Dec 15 '15 at 07:11

1

try to add in style

h3.main
{
position:relative;
z-index:1;
}
video
{
width:100%;
}

answered Dec 15 '15 at 07:11

Anubhav pun

1,323
2
8
20

Video is responsive, but text and buttons are not unfortunately – Kevin Wei Dec 15 '15 at 07:16
your text and button already in center and responsive what you want – Anubhav pun Dec 15 '15 at 07:28
Text and button are not responsive. This is what it looks like: http://imgur.com/a/yWWdl – Kevin Wei Dec 15 '15 at 07:46
edit on fiddle for text and button you wants because your video fiddle jsfiddle.net/suLnu1r3 is working – Anubhav pun Dec 15 '15 at 09:19

score 1 · Answer 2 · answered Dec 15 '15 at 07:26

Okay you are giving the .video-container a static height. Make it's height to 100% . After that grab your video element and give it a min-width and max-width of 100% . Yo might also need to add the max-width property to the video and set it to 100%. You can also use width and height of 100% rather than using min-width and min-height. See what works and create a fiddle.

.video-container {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 700px;
    width: 100%;
    overflow: hidden;
}

video { max-width: 100%; min-width: 100%; min-height: 100%; }

Bootstrap Video Background Not Responsive (Not Scaling)

2 Answers2