在网站上拥有封面大小的响应式视频背景的最佳方式

Question

我尝试过使用带有 HTML5 <video> 标签的 mp4 方法。似乎工作得很好，完全响应，并且占用了全部可用 space，没有像 YouTube 播放器那样显示任何奇怪的黑色填充。除了我不能让它总是居中（封面大小背景）。而且我找不到上传视频并获得直接 mp4 link 的方法。我尝试上传到 Dropbox 和 Streamable。两者都有自己烦人的登陆页面，不适用于 <video>.

我放弃了 <video> 的想法，决定使用 Youtube 播放器。这根本不起作用。这是我的，

<section class="hero">
    <iframe frameborder="0" height="100%" width="100%" class="hero-video" allowfullscreen allow="autoplay; encrypted-media;"
        src="https://www.youtube-nocookie.com/embed/1CL_X5O71gk?vq=hd1080&autoplay=1&loop=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&controls=0&disablekb=1&controls=0&mute=1&showinfo=0&rel=0&html5=1">
    </iframe>
    <img class="logo" src="./assets/logo.png" alt="logo" title="logo" />
</section>

和CSS使用，

.hero-video {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

.hero {
    position: relative;
    text-align: center;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(94,88,88,0.5), rgba(94,88,88,0.5));
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

要尝试这些想法，

https://jsfiddle.net/temurih/xpkoe08j/7/

第二种方法：

在 <video> 标签方法中，我无法将视频居中（封面大小）。它在移动设备上看起来很奇怪。

<section class="hero">
    <video autoplay muted loop class="hero-video">
        <source src="https://player.vimeo.com/external/490883126.hd.mp4?s=ce7a3266505de5d5f8f51cd9c134e21d7b1d21bf&profile_id=175" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
    <img class="logo" src="./assets/logo.png" alt="logo" title="logo" />
</section>

CSS差不多，

.hero-video {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

.hero {
    position: relative;
    text-align: center;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(94,88,88,0.5), rgba(94,88,88,0.5));
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    overflow: hidden;
}

要尝试这些想法，

https://jsfiddle.net/temurih/xpkoe08j/12/

Answer 1

在您的示例代码中，只需设置 CSS 即可将视频大小设为其父级的大小。然后，将 object-fit 设置为 cover:

.hero-video {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

在网站上拥有封面大小的响应式视频背景的最佳方式

Best way to have a cover sized responsive video background on a website

html

css

youtube

html5-video