我在玩弄 wagtail并且在使用默认的 wagtail 编辑器 (hallojs) 插入视频时出现了一个奇怪的 padding-bottom
问题。事实证明,视频被包裹在 .responsive-object
内联样式 padding-bottom: 62.5%;
的 div 中。由于我的视频根本没有响应,我猜我做错了什么。
我在嵌入的视频下面有一个巨大的填充。我找不到解释如何集成 wagtail 编辑器生成的 html 的地方。有 a page in the documentation关于视频嵌入,但没有任何用处。
最佳答案
解决方案
这很简单,搜索 .responsive-object
并找到 embed.ly responsive tutorial .为了让一切看起来都很好,我需要这个 css:
.responsive-object {
position: relative;
padding-bottom: 67.5%;
height: 0;
margin: 10px 0;
overflow: hidden;
}
.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
结果
如果有人从 hallojs 编辑器中找到有关如何正确集成内容的信息,请发表评论或回答 ;)
关于css - 带有填充底部的 wagtail hallojs 编辑器视频嵌入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24935672/