我有一个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)
答案 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
的任何高度似乎都可以。 (但可能不是解决这个问题的理想方法;我没有仔细查看其余代码,以了解为什么存在高度规则。)