I’m using Froala editor on a site. It works great and is to my liking except how inserting video works. I’ve setup a jsfiddle and was hoping someone with better CSS skills than my own could maybe offer a solution.
I’ve set it up so that it only has the video insert button on the toolbar. The editor initializes with an option which sets all inserted videos floated left. My desire is to have any text inserted into the editor after the video, to be below the video and not to the right of it (as a result of the floating). I’ve spent hours trying to set 100% width’s and display blocks on different elements in an attempt to force all text below the video but nothing works. I’m at my wits end with this. Can anyone offer up anything to try? I’m going to cross-post this in the js area as well as I’m not even sure if this issue is a CSS one or a JS one. Hopefully I’ve not totally wasted my time editing the CSS.
Thanks. Yeah, that would definitely work if the text was wrapped in something. As it is, if you insert the video, and then start typing, the text is entered on the right hand side of the video but it’s not contained within its own p tag or anything. You can insert a YouTube video URL on my jsfiddle to see for yourself. However, here’s the code as well that’s inserted:
<p><span class="f-video-editor fr-fvl" data-fr-verified="true"><iframe width="640" height="360" src="//www.youtube.com/embed/SPKf31rUcVE" frameborder="0" allowfullscreen=""></iframe>this is a test</span></p>
I noticed that Redactor: http://imperavi.com/redactor/ has similar behavior in that the text isn’t contained within any p tag or anything of its own. So, I’m now trying to deconstruct how they get their text to clear the video insert.
So I think I have this sorted out. The wrapper around the iframe was floated left which when I added display block to the iframe, it was getting messed up. So float: none on the parent and then display: block on iframe seems have worked. Still not perfect, but I can work with it!
