Youtube 背景在 <body> 中拉伸到高度和宽度答案

【问题标题】：Youtube Background Stretch to both height and width in <body>Youtube 背景在 <body> 中拉伸到高度和宽度
【发布时间】：2016-03-11 16:46:20
【问题描述】：

代码很简单，基本上就是一个iframe：（这段代码就在<body>标签之后。

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
    <iframe frameborder="0" height="100%" width="100%" src="https://www.youtube.com/embed/MYVIDEOID?autoplay=1&amp;controls=0&amp;loop=1&amp;rel=0&amp;showinfo=0&amp;autohide=1&amp;wmode=transparent&amp;hd=1"></iframe>
</div>

我遇到的唯一问题是我的显示器很宽，并且在最大化时，浏览器一侧的边缘是黑色的（这意味着视频只能拉伸这么多）。它只会满足窗口大小到高度或宽度的 100%。

换句话说，如果将大小调整为“手机/平板电脑”的垂直位置，视频的宽度将是 100%（仍然是 16:9 的比例），但所有内容都在顶部边框上方和底部边框下方将是黑色/空白区域。

如何才能使视频始终覆盖 100% 的背景？（如果宽度远大于 16:9 纵横比的高度，它仍然会适当缩放，只是在“可见”视图中缺少视频的顶部/底部。同样......如果在移动模式下，视频的高度是 100% 的设备/浏览器，视频仍然是 16:9，但视频的侧面看不到）

【问题讨论】：

标签： html css video youtube

【解决方案1】：

我发现这个资源完全可以完成我需要做的事情：https://vegas.jaysalvat.com/

最适合使用自己的 MP4（或类似）上传资源。

【讨论】：