如何让YouTube嵌入视频容器溢出页面

Question

我将iframe与youtube嵌入视频。它具有一些样式，因此可以响应屏幕的宽度，如下所示。

HTML：

<main role="main" class="container">
<div class="main-video fixed-top justify-content-center">
    <iframe class="video" width="1920" height="1080"
            src="https://www.youtube.com/embed/T0-P3AS4U4U?modestbranding=1&autohide=1&showinfo=0&controls=1&color=white">
    </iframe>
</div>

CSS：

.main-video {
    z-index: 1;
    display: flex;
    position: absolute;
    top: 54px;
}

.main-video > .video {
    max-height: 600px;
    min-width: 100%;
    border: none;
}

结果：

我如何让视频本身（图2）像缩略图（图1）一样溢出，以仅看其中心？

Answer 1

此方法可能会有所帮助：）

.main-video {
    z-index: 1;
    display: flex;
    position: absolute;
    top: 54px;
    flex-wrap:wrap;
  width:100vw;
  height:100vh;
}

.main-video > .video {
   border: none;
}

<div class="main-video fixed-top justify-content-center">
    <iframe class="video" width="100%" height="100%"
            src="https://www.youtube.com/embed/T0-P3AS4U4U?modestbranding=1&autohide=1&showinfo=0&controls=1&color=white">
    </iframe>
</div>