ag尾Hallojs编辑器视频,底部填充

Gab*_*oux 2 css django video-embedding responsive-design wagtail

我玩弄鹡鸰,有一个奇怪的padding-bottom使用默认的鹡鸰编辑器(插入视频时的问题hallojs)。原来,视频.responsive-object以内联样式包裹在div中padding-bottom: 62.5%;。由于我的视频根本没有响应,因此我觉得有些事情没有正确执行。

vimeo嵌入无响应

在嵌入式视频下,我有很大的空白。我找不到解释如何整合w的编辑器生成的html的地方。有文档页面中的有关视频嵌入,但没有什么用处。

Gab*_*oux 6

这很容易,可以搜索.responsive-object并找到embed.ly响应式教程。为了使一切再次看起来不错,我需要以下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%;
}
Run Code Online (Sandbox Code Playgroud)

结果

现在已嵌入vimeo了(是!)

如果有人从hallojs编辑器中找到有关如何正确整合内容的信息,请发表评论或答案;)

  • 仅供参考,此类在“构建您的网站(面向前端开发人员)”文档中进行了介绍:此处:http://docs.wagtail.io/en/latest/building_your_site/frontenddevelopers.html#sensitive-embeds (2认同)