CODEWITHSUNDEEP
csshtml
Simon Paraire
Simon Paraire

Reputation: 1

fullscreen background html5 doesn't work well with google chrome browser

I have made a website with fullscreen background. It works fine on Safari and IE but not on Google Chrome, the video is not centered and is completely cut on the top right of the screen.

CSS and HTML:

#Video-Background {
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
}
<video id="video-background" autoplay="autoplay" loop>
    <source src="Reel 2015-simovie.webmhd.webm" type="video/webm">
    <source src="Reel 2015-simovie.mp4" type="video/mp4">
    <source src="Reel 2015-simovie.oggtheora.ogv" type="video/ogg">
</video>

Please take a look of my so you ll see how it looks like on simovie-p.com.

Upvotes: 0

Views: 487

Answers (2)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60587

It looks like your code for centering the video is incorrect. You have both left and top set to 0. The transform centering trick you are attempting to use, requires both left and top being 50%, with the transform being -50%.

#Video-Background {
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}

This may appear to be working in IE and Safari, if you are not including the -webkit- (Safari) and -ms- (IE9) vendor prefixes for transform, or IE8 and older which do not support transforms, or the video element for that matter.

(You also have different letter casing in your ID selector in your example, but this is not the case on your website, so I'm guessing this is not your issue.)

Upvotes: 1

Dhinju Divakaran
Dhinju Divakaran

Reputation: 903

try styling with 

#video-background {
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
}

Upvotes: 0

Related Questions