javascript - 全屏iframe背景视频

Question

试图实现某种意义上的英雄背景视频。 HTML5 视频并不是真正的选择，因为我们正在努力确保客户的易用性。

Iframe 必须在任何维度(即 100vw/100vh)上缩放并填充整个设备的整个视口(viewport)。我发现的最佳解决方案是将高度/宽度设置为 300% 左右，以便它在缩放时填充视口(viewport)。显然，缺点是视频的某些部分被剪掉了，而我们并不真正想要。

另一个限制是该解决方案必须同时适用于 vimeo 视频和 youtube，据我发现，这些似乎在某种程度上有所不同。

任何想法都会有所帮助。

Answer 1

这是一个 HTML5 解决方案:

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
    <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
    <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>

代码来自:http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

代码笔:https://codepen.io/dudleystorey/pen/knqyK

YouTube 视频:

.video-background {
    background: #000;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -99;
}
.video-foreground,
.video-background iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
#vidtop-content {
    top: 0;
}

@media (min-aspect-ratio: 16/9) {
    .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
    .video-foreground { width: 300%; left: -100%; }
}

<div class="video-background">
    <div class="video-foreground">
        <iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?
controls=0&amp;showinfo=0&amp;rel=0&autoplay=1&amp;loop=1
&amp;playlist=W0LHTWG-UmQ" allowfullscreen></iframe>
    </div>
</div>

代码来自: http://thenewcode.com/500/Use-YouTube-Videos-as-Fullscreen-Web-Page-Backgrounds

代码笔:https://codepen.io/dudleystorey/pen/PZyMrd