CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
randomuser1
randomuser1

Reputation: 2803

I have a video background on my bootstrap page - how can I make it "fixed"?

I have the following code http://jsfiddle.net/Leytgm3L/22/ and as you can see here on first "section" I have the video background. Now, when user scrolls the webpage down, so far the whole video goes up. I would like to achieve the effect that the webpage overlaps it, so the video and its section is fixed to the page. I have the following CSS code:

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

.video-container2 video {
    position: absolute;
    z-index: -1;
    width: 100%;
}

and I tried to add:

position: fixed

instead of absolute, but it didn't do the trick... How can I do that?

Upvotes: 0

Views: 70

Answers (2)

Michal
Michal

Reputation: 2532

position: fixed will do the trick, but you need to set the top/left/bottom/right with 0 instead of 0%:

.video-container2 {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

With bottom and right set, you don't need height and width anymore.

jsfiddle: http://jsfiddle.net/Leytgm3L/23/

In the comments, we talked about centering the video, even with oversize, and having it fill the viewport no matter the size of the screen. The only way to properly achieve that was with JavaScript. Using jQuery:

$(document).ready(function() {
    setVideoSize();
});

$(window).resize(function() {
    setVideoSize();
});

function setVideoSize() {
    // ratio of video in pixels, width/height
    var videoRatio = 320 / 176;

    // ratio of window in pixels, width/height
    var screenRatio = $(window).width() / $(window).height();

    if (videoRatio < screenRatio) {
        $('.video-container2 video').width($(window).width());
        $('.video-container2 video').height('auto');
    } else {
        $('.video-container2 video').height($(window).height());
        $('.video-container2 video').width('auto');
    }
}

And to center it, we can use this sort of hacky CSS:

.video-container2 video {
  position: absolute;
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
}

jsfiddle: http://jsfiddle.net/Leytgm3L/28/

Upvotes: 1

Christopher Marshall
Christopher Marshall

Reputation: 10736

Change your top/left values to 0 instead of 0%.

.video-container2{
    position: fixed;
    top: 0;
    left: 0;

http://jsfiddle.net/Leytgm3L/25/

Upvotes: 0

Related Questions