让YouTube内嵌的iframe视频完美适合div而没有黑条?

If I have the following markup:

如果我有以下标记:

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

and styling:

和样式:

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

How do I get the video to display full width and height in the div, without having it have those black bars on the top and/or sides, regardless of aspect ratio?

如何让视频在div中显示完整的宽度和高度，而不让它在顶部和/或两侧显示黑色条，而不考虑纵横比?

2 个解决方案

#1

Something like this:

是这样的:

.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%;
}

This will keep responsive your video for all screens.

这将使你的视频在所有屏幕上保持响应。

#2

Add class to frame tag

向帧标记添加类

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

then in CSS upscale it using transform property and hide the overflow on video-wrapper class

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

.video-wrapper{
  overflow:hidden;
}

.vid{
 transform: scale(2.5);
}

#1