使YouTube嵌入式iframe视频非常适合没有黑条的div？

Question

如果我有以下标记：

<div class="video-wrapper">
  <iframe src="link/to/video" frameborder="0"></iframe>
</div>

和样式：

.video-wrapper {
  height: 100vh;
  width: 100vw;
}

如何让video在width中显示完整的height和div，而不会在顶部和/或侧面显示那些黑条，无论宽高比如何？

Answer 1

这样的事情：

.video-wrapper {
    position:relative;
    padding-bottom:56.25%; /* aspect ration for 16:9 */
    /*padding-top: 20px;*/ /* you can add padding-top if needed */
    height:0;
    overflow:hidden;
}

.video-wrapper iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

这样可以随时响应所有屏幕的视频。

Answer 2

将类添加到帧标记

 <div class="video-wrapper">
   <iframe class="vid" src="link/to/video" frameborder="0"></iframe>
</div>

然后在CSS upscale中使用transform属性并隐藏视频包装类的溢出

.video-wrapper{
  overflow:hidden;
}

.vid{
 transform: scale(2.5);
}