Estoy usando un editor de campos de texto enriquecido, por lo que el usuario requiere 0 conocimientos de HTML. En el backend, me encargaré de hacer que los elementos respondan envolviendo los elementos necesarios dentro de un div. La forma en que funciona TinyMce es que puede presionar botones para agregar fragmentos de HTML, como una imagen o iframe. En la parte superior puedes insertar imágenes y videos. Mi objetivo es cambiar ese botón de inserción para que lo envuelva con un div que lo haga receptivo.

Quiero envolver un iframe con div para que responda. Digamos que agrego un iframe, quiero envolver ese iframe con un div para que responda. Probé javascript, donde busca iframes en el documento y los envuelve, pero esto parece innecesariamente complicado. Básicamente, solo quiero cambiar el botón que inserta iframes para tener un div alrededor.

de

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

a

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

Encontré esto, pero desafortunadamente, no entiendo cómo se puede aplicar esto a lo que estoy tratando de hacer. Pero parece significativo http://archive.tinymce.com/forum/viewtopic.php?id=25649