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


Tags: javascript,jquery,html,css,twitter-bootstrap

Problem :

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?



Solution :

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/


    CSS Howto..

    HTML/CSS: How to change image opacity when the text over it is Mouseovered?

    How to create e-commerce website [closed]

    How to make background fill or flush to the footer at the bottom of the window

    How to create DRY CSS when using transform & keyframes

    How to customize responsive columns and inputs fields in twitter bootstrap?

    How to make header cover entire page length?

    How to add multiple attributes in CSS in input element [duplicate]

    HTML/CSS: how to position forms? [closed]

    how can I make a frame made with css be over a div and when changing the width does not affect the content of the div, only the width of the frame?

    Simple Form button submit doesn't show in IE 8-7

    How to change the Img tag src through css only? [closed]

    How to select only some children in CSS?

    How to apply common JavaScript and CSS for all my jsp pages in the application?

    How to make the submenu to be at the same horizontal as its parent's menu with this css?

    How to position HTML code over CSS

    How to set line spacing of an ordered list consistently across browsers?

    How to include google search result in my specified div width and height?

    How to target images with dynamically generated ids with CSS

    How to set overlay on a page according to page height using CSS

    How to style placeholder text color for individual text field?

    How to make css style on Google custom search engine

    How can i align the text in center of a row in css?

    How to apply CSS to only immediate children of a certain class

    How to inline the contents of an entire stylesheet with Wordpress?

    Bootstrap - how to make the image being scaled down to fit the window height?

    How to center absolute div (text) above relative div (image) responsively?

    How to center modal window in css+html?

    How to create a fixed menu (links come from right to left) - HTML & CSS

    How to properly align something that resizes in a specific location

    How to make a Floating Nav bar? [closed]