缩放iframe视频以适应网页

Question

我试图创建一个网页，它有一个没有声音播放的视频背景，我可以很容易地将它应用到一个使用html视频标签保存的视频中，但是当我使用iframe时，它看起来不适用，我想将嵌入样式设置成适合整个页面的样式，这样移动用户就可以看到它的大小来适应整个页面，而不仅仅是与页面相匹配，同时保持高宽比。

​

.banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="banner">
  <iframe title="vimeo-player" src="https://player.vimeo.com/video/76979871" width="100%" height="100%" frameborder="0" allow="autoplay;" allowfullscreen></iframe>
</div>

​

Answer 1

Vimeo似乎以与object-fit: contain相同的方式显示视频--也就是说，它显示的是完全高度或全宽度的未裁剪视频，这取决于视频的纵横比与视口的关系。

要求是以与object-fit: cover相同的方式显示视频--也就是说，整个视口被视频覆盖，或者边被裁剪，或者顶部和底部取决于视频的纵横比与视口的关系。

这可以使用Javascript函数来实现，在加载视频或调整窗口大小时，可以使用Javascript函数检查实际的视口尺寸与视频的纵横比。然后使用transform: scale..扩展视频以满足需要。

在这个片段中，我们假设视频的纵横比为16/9。虽然这是一个非常普遍的比率，但是如果要使用不同的视频，可能需要一些代码来获得实际的纵横比。

下面是代码，注意它不能作为一个如此代码段工作，可能是因为嵌套的iframes (?)但是它已经在Windows 10和各种仿真器上进行了边缘/Chrome测试，并且工作正常。容器(=横幅)已放置在外部容器中，其位置固定在此演示中，但当然，如果合适，则移除并使用主体。

<style>
body {
    margin: 0;
    padding: 0;
}
.outer-container {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}  
.container {
    position: relative;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: yellow;
}
.video{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
}
</style>
<div class="outer-container">
<div class="container">
   <iframe class="video" src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&autopause=0&mute=1" frameborder="0" allow="autoplay"></iframe>
</div>
</div>
<script>
const vid = document.querySelector('.video');
const ratio = 16/9; //!you may need to 'ask' to find out the correct ratio, this is the one for this video and is common.
function resize() {
  const w = window.innerWidth;
  const h = window.innerHeight; 
  const scale =  ((w / h) > ratio) ? (w / (ratio * h)) : (h * ratio / w);

  vid.style.transform = 'scale(' + scale + ')';
}
vid.onload = resize;
window.onresize = resize;
</script>