全屏 iframe 背景视频答案

【问题标题】：Full screen Iframe background video全屏 iframe 背景视频
【发布时间】：2018-07-25 17:38:58
【问题描述】：

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

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

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

任何想法都会有所帮助。

【问题讨论】：

为什么不能选择 HTML5？

标签： javascript html css iframe responsive

【解决方案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

Codepen：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

【讨论】：