调整大小以始终适合浏览器的背景视频答案

【问题标题】：Background video that resizes to always fit the browser调整大小以始终适合浏览器的背景视频
【发布时间】：2013-05-17 05:54:16
【问题描述】：

我正在尝试创建一个以视频为背景的网站。我一直在寻找如何重新创建 Spotify's 主页背景之类的东西，但似乎无法使其正常工作。

我的问题是我可以使用浏览器缩放高度或宽度，但不能同时使用两者。与 Spotify 网站上的视频不同，它并非始终可以缩放以适应浏览器。我尝试了很多东西，其中大部分我不记得了。我不介意使用 JQuery 来实现这个效果。

我当前的代码是：

<!DOCTYPE html>
<html>
<head>
<title>VideoBG</title>
<style type="text/css">


#videohome {
    position:absolute; 
    height: 100%;
    width: 100%;

    top:0;  
    left:0;  
    right:0;  
    bottom:0;
}

</style>
</head>
<body>


        <video  id="videohome"  preload="auto" autoplay="true" loop="loop" muted="" volume="0">
            <source src="./homepage.mp4" type="video/mp4" />
        </video>


</body>
</html>

【问题讨论】：

看看 jQuery 的 BigVideo.js 插件：dfcb.github.io/BigVideo.js
我在 Spotify 的主页上看不到任何视频，只有某种视差滚动。
@LeBen：这只有在您第一次访问他们的网站时才会发生。他指的是这个特定的页面：spotify.com/en/video-splash
哦，好吧！所以他们用 JavaScript 调整视频的大小。您可以花一些时间扩展他们的代码以理解它，或者按照@reinder 的建议使用 BigVideo.js。
我尝试扩展他们的来源以弄清楚他们在做什么，但因为我有点新手，所以无法做到。我已经尝试了一段时间，我所能看到的是它们动态地改变了其中一个元素的宽度值，因为浏览器改变了它的宽度。我现在将使用该插件，但我真的很想学习如何使用 javascript/jQuery 自己调整视频大小。谢谢大家。

标签： html css video browser resize

【解决方案1】：

在容器中使用object-fit: cover

【讨论】：

【解决方案2】：

我发现了这个：

http://wesbos.com/css-object-fit/

使用object-fit：cover；在您的视频标签上

它对我有用。

【讨论】：

应该注意的是，截至撰写本文时，Edge 仍不完全支持 object-fit。它只支持在标签上使用它。 caniuse.com/#search=objectfit
根据上述评论 object-fit 适用于所有视频浏览器，IE 和 Edge 除外。您可以在此处的 Microsoft 开发人员论坛上对其进行投票：wpdev.uservoice.com/forums/257854-microsoft-edge-developer/… 同时使用 JS polyfill，但如果获得更多投票，它将被实施。

【解决方案3】：

老歌但老歌。我自己一直在努力解决这个问题，但发现纵横比媒体查询可以很好地完成这项工作。

如果不支持媒体查询，视频仍会覆盖页面，但无法正确缩放。

如果不支持translateX、translateY 或@supports，则视频不会居中。

HTML：

<div class="cover">

    <video autoplay loop mute poster="path/to/image.jpg">
        <source src="path/to/video.mp4" type="video/mp4" />
        <source src="path/to/video.webm" type="video/webm" />
        <source src="path/to/video.ogv" type="video/ogg" />
        <img src="path/to/image.jpg" alt="" />
    </video>

</div>

CSS：

.cover {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.cover img, .cover video {
    display: block;
    height: auto;
    left: auto;
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    right: auto;
    position: absolute;
    top: 0;
    width: auto;
    z-index: 1;
}

@supports (transform: translateX(-50%)) {

    .cover img, .cover video {
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

}

@media screen and (min-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */

    .cover img, .cover video {
        max-width: 100vw;
        min-width: 100vw;
        width: 100vw;
    }

}

@media screen and (max-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */

    .cover img, .cover video {
        height: 100vh;
        max-height: 100vh;
        min-height: 100vh;
    }

}

【讨论】：

【解决方案4】：

您需要有一个适合屏幕的容器 div，然后向视频添加一个类，该类将其调整为宽度或高度。

CSS：

.container {
width: 100%;
height: 100%;
position: absolute;
padding:0;
margin:0;
left: 0px;
top: 0px;
z-index: -1000;
overflow:hidden;
}

.videoPlayer {
    min-height: 100%;
    //min-width:100%; - if fit to width
position:absolute;
bottom:0;
left:0;
}

HTML：

<div class="container"><video class="videoPlayer">Code goes here</video></div>

【讨论】：