我已经阅读了大量关于响应式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>
发布于 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
。
https://stackoverflow.com/questions/52415228
复制相似问题