gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 06:56:21 24 4
gpt4 key购买 nike

我已经阅读了大量关于响应式 iframe 集成的帖子,包括此处和 google 的其他地方,但没有任何内容可以解决我的具体问题。我认输了,我需要帮助。

目标:
创建一个包含三个(或更多)最大宽度和最大高度 (400 x 225) 但可以相应地缩小到最大值以下的 YouTube 视频的响应式水平方向居中对齐列表。

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

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

结果:
我可以制作一个无响应的水平居中的视频列表,但拒绝响应式调整大小,或者我可以制作一个最大宽度的响应式视频列表,该列表可以根据正在查看的任何视口(viewport)正确调整大小,却顽固地左对齐和垂直定向。我似乎无法兼顾两者。

代码:::

来自 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>

最佳答案

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

.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

关于html - 响应式 iframe 视频列表居中水平和最大宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52415228/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com