1

我有两种方法可以为网站设置全屏背景视频，下面，我有两种方法的演示：

方法#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;
}

方法#2 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;
}

哪一种是最好和推荐的方法？是否object-fit:cover推荐设置全屏背景视频的方法？

4

0 回答 0