Css 对象是否适合：介绍设置全屏背景视频的推荐方法？_Css_Html5 Video_Object Fit

Css 对象是否适合：介绍设置全屏背景视频的推荐方法？

css

Css 对象是否适合：介绍设置全屏背景视频的推荐方法？,css,html5-video,object-fit,Css,Html5 Video,Object Fit,我有两种方法来设置网站的全屏背景视频，下面是两种方法的演示：方法#1：哪一种是最好的推荐方法？ object-fit:cover是否是设置全屏背景视频的推荐方法也许你的问题更适合作为一个比较性的回顾——也别忘了在问题本身中包含这两个代码片段。但是如果你考虑IE，我建议你不要使用它，因为它不被支持。正如你在这里看到的- HTML: <!DOCTYPE html> <html lang="en"> <body> <!-- Home --&

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

方法#1：

哪一种是最好的推荐方法？

object-fit:cover

是否是设置全屏背景视频的推荐方法

也许你的问题更适合作为一个比较性的回顾——也别忘了在问题本身中包含这两个代码片段。但是如果你考虑IE，我建议你不要使用它，因为它不被支持。正如你在这里看到的-

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;
}

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;
}