wagtail hallojs editor video embed with padding-bottom

Question

I was playing around with wagtail and had a strange padding-bottom issue when inserting a video using the default wagtail editor (hallojs). Turns out the video is wrapped in a .responsive-object div with inline style padding-bottom: 62.5%;. Since my video wasn't responsive at all, I gess there was something I did't do correctly.

I had a huge padding under the embedded video. I couldn't find a place explaining how to integrate wagtail's editor generated html. There's a page in the documentation about video embedding, but nothing useful.

Answer 1

Solution

It was easy, searched for .responsive-object and found embed.ly responsive tutorial. To make everything look good again, I needed this 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%;
}

Result

If someone finds something on how to integrate content properly from the hallojs editor, leave a comment or an answer ;)