CODEWITHSUNDEEP
javascripthtmlcss
Robbie Cooper
Robbie Cooper

Reputation: 483

CSS to keep background video centred

I've got a background video playing on a web page, and this CSS;

#video_background {
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
    z-index: -1000;
    overflow: hidden;
}

..is keeping it centered, like I want it to, but it's keeping all of the edges within the browser window, rather than always being full-bleed. I'm trying to replicate what this site is doing;

http://marisapassos.com/#home

This site appears to have two sets of rules, one on a div that contains the video, and one on the video itself. Could someone explain to me why that works and what I'm doing doesn't? Is there also js working to keep the video on the linked site centered?

Upvotes: 0

Views: 497

Answers (1)

ilzxc
ilzxc

Reputation: 222

Yes, look at the video_background.js in the source of the website you linked to, specifically at the $(window).resize function:

$(window).resize(function() {
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var width;
        var height;

        //size
        width = windowWidth;
        height = width*formH/formW;
        if(height<windowHeight){
            height = windowHeight;
            width = formW*height/formH;
        }

        $div_holder.css("width", width);
        $div_holder.css("height", height);

        $div_holder.css("left", windowWidth/2-width/2);
        $div_holder.css("top", windowHeight/2-height/2);

    });

Left and top are defined in terms of both the windowWidth and (video) width which keeps the video centered.

Upvotes: 4

Related Questions