Question

TL; DR：我需要一个缩放的iFrame，以更大的屏幕尺寸为中心。我知道由于方法中的绝对定位，这是一个问题。

我正在尝试将iFrame（专门用于YouTube视频）嵌入到网站中。在2017年，我希望该网站具有响应能力，当然，我希望嵌入式视频能够做出响应。所以我在网上发现了一些代码，它似乎是响应性地调整iFrame大小的常用方法。我明白这里发生了什么。

相关CSS：

@media only screen and (min-width: 480px) {
    .videoSizer {
        width: 60%;
        height: auto;
    }
}

This is where the above code gets us to.

所以尺寸大约是我想要它的位置，它在页面上看起来不错，但是它被卡在容器的左上角。应该是这样，它被编码到容器中的绝对位置。它正在做我告诉它的事情。但是，我不明白，这就是问题所在，当我以任何方式改变位置编码时，容器大小保持不变，但iFrame元素消失了。

所以我想让视频集中在网站上而不占用100％的窗口，但是我没有想法和知识如何实现这一点。如果有人有任何建议，我会非常感激！我希望我已经用足够描述性的方式编写了这个，并且有足够的资源来充分解释问题。

回答（感谢LKG帮助我找到它）：

删除上面提到的@media查询。没必要，也会产生问题。
代码与LKG的答案一样，如下所示。

基于此正确计算底部填充： - 将边距和元素宽度一起添加 - 将元素宽度除以边距宽度（我们称之为p1） - 将iFrame元素高度除以宽度（调用此p2） - 将p1乘以p2 - 答案是你的新填充底值

Answer 1

只需更改css即可获得中心

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    margin:auto;
}

html,
body {
  margin: 0;
  padding: 0;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  padding-top: 20px;
  overflow: hidden;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="videoWrapper">
  <iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen>
    </iframe>
</div>

Answer 2

CSS：

.vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

HTML：

 <div class="vertical-center">
   <iframe width="560" height="315" src="../assets/video.mp4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
      <p>Error loading video</p>
   </iframe>
</div>

响应式iFrame视频缩放，但不会居中

2 个答案: