I'm using a rich text field editor, so the user requires 0 HTML knowledge. In the backend, I will handle making the elements responsive by wrapping the necessary elements inside a div. The way TinyMce works is that you can press buttons to add chunks of HTML, like an image or iframe. At the top you can insert images and videos. My goal is to change that insert button so it wraps it with a div that makes it responsive.

I want to wrap an iframe with div so it becomes responsive. Let's say I add an iframe, I want to wrap that iframe with a div so it is made responsive. I have tried javascript, where it searches the doc for iframes and wraps them, but this seems unnecessarily complicated. Essentially I just want to change the button that inserts iframes to have a div around.

from

<iframe src="https://www.youtube.com/embed/or1DfXdqu3U" width="560" height="314" allowfullscreen="allowfullscreen"></iframe>

to

<div class="ratio">
<iframe src="https://www.youtube.com/embed/or1DfXdqu3U" width="560" height="314" allowfullscreen="allowfullscreen"></iframe>
</div>

I found this, but unfortunately, I don't understand how this can be applied to what I am trying to do. But it does seem significant http://archive.tinymce.com/forum/viewtopic.php?id=25649