2

I have two methods to setup full screen background video for a website, Below, I have demos for both methods:

Method #1: https://codepen.io/irfan-dayan/pen/MqYaMd

HTML:
<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- Home -->
    <section id="home">
        <!-- Background Video -->
        <video id="home-bg-video" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" autoplay loop muted>
            <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
            <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
        </video>
    </section>
  </body> 
</html>

CSS:
html, body {
    height: 100%;
}
#home {
    height: 100%;
}
#home-bg-video {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg") no-repeat;
    background-size: cover;
}

Method #2 with object-fit: https://codepen.io/irfan-dayan/pen/JaoGEE

HTML:
<body>

    <main>

        <!--Home -->
        <section class="home">
            <div class="bg-video">
                 <!-- Full Screen Background Video -->
                 <video class="bg-video-content" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" autoplay loop muted>
                    <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
                    <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
                </video>
            </div>
        </section>
    </main>
</body>

CSS:
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    overflow: hidden;
}
.bg-video-content {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

Which one is the best and recommended method? Is object-fit:cover the recommended method to setup full screen background video?

Irfan
  • 4,882
  • 12
  • 52
  • 62
  • Maybe your question is better suited at [Codereview](https://codereview.stackexchange.com) as a comparative review - also don’t forget to include both code snippets into the question itself. – insertusernamehere Aug 21 '18 at 15:04
  • 1
    Honestly, I'd rather use object-fit. But if you consider IE, I advise you not to use it, since it is not supported. As you can see here. - https://caniuse.com/#search=object-fit – martinho Aug 21 '18 at 16:21

0 Answers0