响应式 iframe 视频列表居中水平和最大宽度

Question

我已经阅读了大量关于谷歌这里和其他地方的响应式iframe集成的帖子，但没有任何东西能解决我的具体问题。我正在认输，我需要帮助。

目标：
创建一个响应式水平方向的中心对齐列表，其中包含三个(或更多(YouTube视频，该视频具有最大宽度和最大高度(400 x 225(，但可以响应式缩小到最大值以下。

我在哪里：
我创建了一个响应式垂直方向列表，其中包含三个YouTube视频，每个视频都在自己的响应式容器中;但是，我一生都无法让iframe在视频容器内水平定位和居中，同时保持响应。

我尝试过的：(浮点：左;
浮点：右;显示：内联块;对齐：左;对齐：右;填充：边距：(等。我已经将 CSS 插入 html 本身和 CSS 包含文件，并测试了它们的许多排列和组合，但都无济于事。尽管如此，我已经在谷歌上对此进行了研究，虽然我发现了类似的情况，但我还没有遇到这种特定变体的解决方案。

结果：我可以制作一个非响应式水平
中心导向的视频列表，按其应有的外观布局，但拒绝以响应方式调整大小，或者我可以制作一个最大宽度的响应式视频列表，该列表使用正在观看的任何视口正确调整大小，但顽固地左对齐和垂直方向。我似乎无法同时获得两者的精华。

代码：：：

从 CSS 包括：

.video{
color: #927c5a;
font-family: "Impact", Impact,charcoal, sans-serif;
font-size: 19px;
font-weight: normal;
height: auto;
width: 100%;
text-align: center;
margin-bottom: 10px;
display: inline;
float: left;
border: 1px solid blue;
}        
.videoWrapper {
position: relative;
padding-bottom: 205px;
padding-top: 25px;
height: 0;
max-width: 400px;
max-height: 225px;
border: 1px solid red;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 400px;
max-height: 225px;
border: 1px solid green;
}        

从 HTML 文件：

<div class="video">
<div class="videoWrapper">
<iframe  src="https://www.youtube.com/embed/o6l14SkYtaY?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<div class="videoWrapper">
<iframe  src="https://www.youtube.com/embed/o6l14SkYtaY?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<div class="videoWrapper">
<iframe  src="https://www.youtube.com/embed/o6l14SkYtaY?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>

Answer 1

不确定这是否是你想要的...

.video {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
iframe {
max-width: 400px;
max-height: 225px;
width: 100%;
height: 100%;
}

并删除.videoWrapper额外的div.