javascript - 使 YouTube 嵌入式 iframe 视频完全适合 div 而没有黑边？

Question

如果我有以下标记:

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

和样式:

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

如何让 video 在 div 中显示完整的 width 和 height，而不需要它无论宽高比如何，顶部和/或侧面都有黑条吗？

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

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