Question

在Google以及其他地方，我已经阅读了大量关于响应式iframe集成的文章，但是没有什么能解决我的特定问题。我把毛巾扔了，需要帮助。

目标：
要创建三个（或更多）具有最大宽度和最大高度（400 x 225）但可以响应地缩小到最大值以下的youtube视频的响应式水平居中对齐列表（三个或更多）。

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

我尝试过的方法：
（浮动：左；浮动：右；显示：行内块；对齐：左；对齐：右；填充：边距：）ETC。我将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>

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。

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

1 个答案: