Wrap images, links, iframes in double hierarchy

[PostMidnight]

If an iframe / img or are detected, they should be wraped as follows:

<iframe / img / a>

It will make it easier afterwards to style the iframe or links so they won't overflow.

[julianlam]

What do you mean by wrapped? I'm confused as to what you are suggesting 😄

[PostMidnight]

My apology for not being coherent, please allow me to rephrase:

One of the ways to make iframe responsive (but not only iframes), is to wrap it with two divs. In the outer div one may set position=relative, and in the inner div one may set position=absolute. See here: https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/

Although the article recommends a single div wrap, I found that double divs makes things easier especially if you wish to do further styling.

So <iframe src=...> becomes:

<div class="outer-container>
   <div class="inner-container>
       <iframe src=...
   </div>
</div>

Currently I am doing the above swap using filter:parse.post but I believe we should do this in the client with Quill, so as not to burden the server with this code.

Note also the oEmbed code snippet mentioned in the other git issue I opened today. It may be a good idea to integrate it all together as part of the client.