视频嵌入CSS宽度不一致

时间:2017-12-23 14:35:35

标签: css wordpress

我有一个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)

2 个答案:

答案 0 :(得分:0)

更改宽度:113%至100%并摆脱margin-left

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

答案 1 :(得分:0)

您的容器 所需的大小。

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

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

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

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