Quill.js: Create nesting block elements when inserting embeds

Question

I would like to end up with this structure when embedding a video:

<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.2493%;">
    <iframe src="https://www.youtube.com/embed/8zHdLF3-coA?rel=0&showinfo=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no">
    </iframe>
</div>

I can easily insert the <iframe> with the quill.insertEmbed(range.index + 1, 'video', url, Quill.sources.USER);. But how do I then append the iframe in a div as above?

Answer 1

It's actually very simple albeit manual(thought there'd be some Quill's way of doing this kinda thing...). Someone please advise if there was a better way!

export default class CustomVideoBlot extends BlockEmbed {

 static create(url) {
    const node = super.create();
    const vidWrapper = <HTMLDivElement>document.createElement('div');
    // Set attributes on the iframe
    node.setAttribute('frameborder', '0');
    node.setAttribute('allowfullscreen', true);
    node.setAttribute('src', this.sanitize(url));
    // Set styles to the video wrapper
    Object.assign(vidWrapper.style, WRAPPER_ATTRIBUTES);
    // Append iframe as a child of the wrapper
    vidWrapper.appendChild(node);

    return vidWrapper;
  }
 }