css - 带有填充底部的 wagtail hallojs 编辑器视频嵌入

Question

我在玩弄 wagtail并且在使用默认的 wagtail 编辑器 (hallojs) 插入视频时出现了一个奇怪的 padding-bottom 问题。事实证明，视频被包裹在 .responsive-object 内联样式 padding-bottom: 62.5%; 的 div 中。由于我的视频根本没有响应，我猜我做错了什么。

我在嵌入的视频下面有一个巨大的填充。我找不到解释如何集成 wagtail 编辑器生成的 html 的地方。有 a page in the documentation关于视频嵌入，但没有任何用处。

Answer 1

解决方案

这很简单，搜索 .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 编辑器中找到有关如何正确集成内容的信息，请发表评论或回答 ;)