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

【问题标题】：How to let YouTube embed video container overflow page如何让 YouTube 嵌入视频容器溢出页面
【发布时间】：2020-06-18 01:54:14
【问题描述】：

我有带有 youtube 嵌入视频的 iframe。它有一些样式，所以它可以响应屏幕的宽度，你可以在下面看到。

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）一样只看到它的中心？

【问题讨论】：

标签： html css iframe youtube-iframe-api

【解决方案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>

【讨论】：