Html 响应iFrame视频已缩放，但赢得'；t中心

TL；DR：我需要一个缩放的iFrame，以便在更大的屏幕上居中。我知道这是一个问题，因为绝对定位的方法

我正在尝试将iFrame（特别是YouTube视频）嵌入到网站中。现在是2017年，我希望网站能够响应，当然，我也希望嵌入式视频能够响应。所以我在网上找到了一些这样做的代码，它似乎是响应地调整iFrame大小的常用方法。我知道这里发生了什么

相关HTML：

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

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

这很好，但是视频占据了100%的容器空间。应该是这样的，它是这样编码的。但如果我不想让它这么做呢？在较大的屏幕上，视频占据整个窗口看起来很糟糕。我找不到一个答案来避免这种情况发生，所以我试着把我的“videoWrapper”放在另一个叫做“videoSizer”的东西里，并将它缩小到宽度：60%，当屏幕大小大于480px时，高度：自动

相关HTML：

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

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

所以大小和我想要的差不多，在页面上看起来不错，但是它卡在了容器的左上角。它应该是这样的，它被编码到容器中的那个绝对位置。它在做我告诉它的事。然而，我不明白的是，问题就在这里，当我以迄今为止我所想到的任何方式更改位置编码时，容器大小保持不变，但iFrame元素消失了

所以我想让视频集中在网站上，而不是占据100%的窗口，但我的想法和知识，如何做到这一点。如果有人有任何建议，我将非常感激！我希望我写这篇文章的方式足够描述性，并且有足够的资源来充分解释这个问题

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

• 删除上面提到的@media查询。没有必要，并且会产生问题
• 代码如LKG的答案所示，如下所示

要基于此正确计算底部填充，请执行以下操作： -同时添加边距和元素宽度 -将元素宽度除以边距宽度（我们称之为p1） -将iFrame元素高度除以宽度（称为p2） -将p1乘以p2

---

-答案是新的填充底部值

只需更改css即可获得中心

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

html，
身体{
保证金：0；
填充：0；
}
.视频包装器{
位置：相对位置；
垫底：56.25%；
身高：0；
填充顶部：20px；
溢出：隐藏；
}
.videoWrapper-iframe{
位置：绝对位置；
排名：0；
左：0；
右：0；
保证金：自动；
}

CSS：

HTML:

加载视频时出错

问题不在于缩放，而在于定位。否。元素没有移动。但在小提琴中，您的视频现在处于中心位置，这是您的要求。那我担心什么呢？我需要去掉@媒体的部分。这给我带来了麻烦。谢谢你的帮助。

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

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