[Solved] Responsive video needs a wrapping element

[kkomelin]

I'm looking for a way to implement this nested element:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Implementing separate DIV and IFRAME bloats with necessary classes is not a problem. But I've spent significant amount of time experimenting with different ways of making them work together. Nothing worked for me.

And I'm definitely not alone with this problem:
slab/parchment#30
#1679

Could you please advise me on how to better implement this?

[kkomelin]

I have finally implemented it myself:

const BlockEmbed = Quill.import("blots/block/embed");
const Link = Quill.import("formats/link");

class EmbedResponsive extends BlockEmbed {
  static blotName = "embed-responsive";
  static tagName = "DIV";
  static className = "embed-responsive";  

  static create(value) {
    
    const node = super.create(value);
    node.classList.add("embed-responsive-16by9");

    const child =  document.createElement("iframe");
    child.setAttribute('frameborder', '0');
    child.setAttribute('allowfullscreen', true);
    child.setAttribute('src', this.sanitize(value));
    child.classList.add("embed-responsive-item");

    node.appendChild(child);

    return node;
  }

  static sanitize(url) {
    return Link.sanitize(url);
  }

  static value(domNode) {
    const iframe = domNode.querySelector('iframe');
    return iframe.getAttribute('src');
  }
}

Quill.register(EmbedResponsive);

[ickas]

I will recover this topic just to leave the solution I used.
If your editor go from edge to edge (100vw) you just need to add this style inside the .ql-editor:

iframe {
  width: 100%;
  height: 56.25vw;
}

In my case, I have a narrow centered container with max-width: 800px. If this case is like yours, you just need to add a max-height property with the maximum width of container:

iframe {
  width: 100%;
  height: 56.25vw;
  max-height: calc(800px / 16 * 9);
}

calc(800px / 16 * 9) calculates the 16:9 ratio of your container maximum width.

[Ben-equine]

@henriquemacedo Thank you!! Had been struggling with this one for a while.