响应iframe视频列表水平居中和最大宽度
响应iframe视频列表水平居中和最大宽度
提问于 2018-09-20 06:57:03
我已经阅读了大量关于响应式iframe集成的帖子，无论是在这里还是在谷歌的其他地方，但都没有解决我的具体问题。我认输了，我需要帮助。
目标：
为了创建一个响应式的水平导向的居中对齐列表，其中包含三个(或更多) youtube视频，这些视频具有最大宽度和最大高度(400 X 225)，但可以相应地缩小到最大值以下。
我所在的位置：
我已经创建了一个响应式的垂直定向列表，其中包含三个youtube视频，每个视频都在各自的响应式容器中；然而，我无论如何也不能让iframe在保持响应性的同时在视频容器中水平定向和居中。
我尝试过的：
(float: left；float: right；display: inline-block；align: left；align: align；padding: margin:)等。我已经将CSS插入到html本身和CSS包含文件中，并测试了它们的许多排列和组合，但都无济于事。尽管如此，我已经在google上研究过这个问题，虽然我也发现了类似的情况，但我还没有遇到针对这种特殊变化的解决方案。
结果是：
我可以制作一个没有响应性的、水平居中的视频列表，它看起来应该是什么样子，但拒绝相应地调整大小，或者我可以制作一个最大宽度响应性的视频列表，它可以根据正在观看的任何视窗正确地调整大小，但顽固地左对齐和垂直。我就是不能两全其美。
代码：
来自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>回答 1
Stack Overflow用户
发布于 2018-09-20 07:11:25
不知道这是不是你想要的。
.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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52415228
复制相关文章
相似问题