wangtail hallojs编辑器视频嵌入填充底部

时间:2014-07-24 13:52:31

标签: css django responsive-design video-embedding wagtail

使用默认的wagtail编辑器(wagtail)插入视频时,我正在玩hallojs并遇到一个奇怪的padding-bottom问题。事实证明,视频包含在.responsive-object div中,内联样式为padding-bottom: 62.5%;。由于我的视频根本没有响应,我认为我做的事情做得不对。

vimeo embed not responsive

我在嵌入式视频下面有一个巨大的填充。我找不到一个解释如何整合wigtail编辑器生成的html的地方。有关于视频嵌入的a page in the documentation,但没什么用处。

1 个答案:

答案 0 :(得分:5)

解决方案

很容易,搜索.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%;
}

结果

vimeo embed now resposnive (yay!)

如果有人发现了如何从hallojs编辑器中正确整合内容,请留下评论或答案;)