css - wagtail hallojs 编辑器视频嵌入了 padding-bottom

Question

我在玩wagtail并且在使用默认 wagtail 编辑器 ( hallojspadding-bottom )插入视频时遇到了一个奇怪的问题。原来视频被包裹在一个带有内联样式的 div 中。由于我的视频根本没有响应，我猜我做的不对。.responsive-objectpadding-bottom: 62.5%;

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

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 编辑器中找到有关如何正确集成内容的信息，请发表评论或回答；）