Vimeo背景的响应英雄

Question

我正在尝试复制background-size: cover; 在我的网站的“英雄”部分添加了Vimeo视频。 我可以很好地观看视频，但在小屏幕上无法正确缩小视频。

这是我目前所拥有的：

HTML：

<div id="vimeohero">
  <iframe src="https://player.vimeo.com/video/319007333?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

CSS：

#vimeohero {
  height: 300px;
}

iframe {
  width: 100vw;
  height: 56.25vw; // Given a 16:9 aspect ratio, 9/16*100 = 56.25
  min-height: 100vh;
  min-width: 177.77vh; // Given a 16:9 aspect ratio, 16/9*100 = 177.77
  position: relative;
  top: 50%;
  left: 50%;
  transform: perspective(1px) translate(-50%, -50%);
}

https://jsfiddle.net/a7j0rbmq/1/

当您在小屏幕（375像素x 812像素）上观看视频时，视频被放大，并且显示的background-size: cover;与background-size: cover;相同background-size: cover; 将。

（显然，视频将不得不稍微放大以填充空间，但这会放大超过必要的大小。如果将屏幕的高度更改为与div的高度（300像素）匹配，则显示效果很好）。

如果删除min-width声明，它几乎可以解决问题，但是在某些屏幕尺寸上，视频的两边都会出现空格:(

Answer 1

您需要在CSS上进行一些更改以实现所需的功能。

编辑：将高度调整为300px。

 #vimeohero { background: #eee; height: 300px; overflow: hidden; padding: 0; position: relative; } iframe { box-sizing: border-box; height: 56.25vw; left: 50%; min-height: 100%; min-width: 100%; transform: translate(-50%, -50%); position: absolute; top: 50%; width: 177.77777778vh; } 

 <div id="vimeohero"> <iframe src="https://player.vimeo.com/video/319007333?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> 

该代码段不显示视频，请参见codepen。

https://codepen.io/flavio-caruso/pen/WBKZqY

Answer 2

 #vimeohero { height: 100vh; width: 100%; overflow: hidden; } iframe { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; } *{ padding:0; margin:0; } 

 <div id="vimeohero"> <iframe src="https://player.vimeo.com/video/319007333?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> 

删除所有元素上的填充和边距即可解决它！