视频嵌入CSS宽度不一致

Question

我有一个Wordpress博客，我的精选图片和视频扩展到帖子之外，但我遇到了问题。

每当我在YouTube之外嵌入视频时，嵌入就会完全混乱。而且我不确定为什么。

我在这里有两个例子，请查看链接：https://imgur.com/a/4wnjY

控制宽度的css行是.fluid-width-video-wrapper，代码是：

width: 113% !important;
height: 51px;
margin-left: -6.4%;

现场演示： 正确的文章：https://www.droppet.se/visuellt/en-man-uppfostrar-en-ekorre/ 文章不正确：https://www.droppet.se/sport/cavani-och-mbappe-kombinerade-till-ett-drommal/（密码wvideo）

Answer 1

更改宽度：113％到100％并摆脱margin-left

.fluid-width-video-wrapper {
    width: 100%;
    height: 51px;
    /* margin-left: -6.4%; */
    margin-bottom: 7px;
}

Answer 2

您的容器是所需的大小。

问题出在iframe内部; div .media-container有这些CSS规则，可以防止视频成为框架文档的全宽：

height: 56.23vw;
max-width: 177.85vh; 

从该类中删除max-width规则可以解决问题。

但是，由于您正在构建第三方网站，因此您将无法删除该类;相反，您需要调整iframe的高度，以便框架网站的规则与您的布局相匹配。将你的.fluid-width-video-wrapper高度改为任何高于85px的高度似乎都可以。 （但可能不是解决这个问题的理想方法;我没有仔细查看其余代码，以了解为什么存在高度规则。）