Embedding code into a website I'm using an HTML editor to insert code into a website. When you embed media like an iframe element, it deletes the code.

It's apparently a bug with TINYMce and grappelli, so as a workaround, I insert non-media content into the HTML editor:

&lt;div id=”youtube1”&gt;&lt;p&gt;width="854" height="480" src="https://www.youtube.com/embed/knYelygG1fI" frameborder="0" allowfullscreen&lt;/p&gt;&lt;/div&gt;


and then use DOM manipulation to replace the necessary elements.

It might be better to select by class, but I'm not sure how to do that in JavaScript. I've used jQuery innerWrap(), append() and prepend() too, which works. However, as soon as the YouTube embed URL is inserted into the iframe element:

iframe src="youtube/embed/movie"


the videos don't show and the iframes disappear.

This code works, but it just isn't very DRY. I've tested it on an Nginx server, hosted by Digital Ocean. The number of videos is also limited by the number of var strMessage, etc. I have physically written into the template, which isn't very dynamic.

&lt;div id=”youtube1”&gt;&lt;p&gt;width="854" height="480" src="https://www.youtube.com/embed/knYelygG1fI" frameborder="0" allowfullscreen&lt;/p&gt;&lt;/div&gt;

&lt;div id=”youtube2”&gt;&lt;p&gt;width="854" height="480" src="https://www.youtube.com/embed/_9RhLQvr0oc?autoplay=1&lt;/p&gt;&lt;/div&gt;

&lt;div id=”youtube3”&gt;&lt;p&gt;width="854" height="480" src="https://www.youtube.com/embed/_9RhLQvr0oc?autoplay=1&lt;/p&gt;&lt;/div&gt;

&lt;script type=”text/javascript”&gt;

var strMessage = document.getElementById("youtube1");
strMessage.innerHTML = strMessage.innerHTML
                   .replace('&lt;p&gt;', '&lt;iframe ')
                   .replace('&lt;/p&gt;', '&gt;&lt;/iframe&gt;')

var strMessageTwo = document.getElementById("youtube2");
strMessageTwo.innerHTML = strMessageTwo.innerHTML
                   .replace('&lt;p&gt;', '&lt;iframe ')
                   .replace('&lt;/p&gt;', '&gt;&lt;/iframe&gt;')

var strMessageThree = document.getElementById("youtube3");
strMessageThree.innerHTML = strMessageThree.innerHTML
                   .replace('&lt;p&gt;', '&lt;iframe ')
                   .replace('&lt;/p&gt;', '&gt;&lt;/iframe&gt;')

&lt;/script&gt;
You can use querySelectorAll how @Pavlo says in his comment. It would work:

&lt;script type=”text/javascript”&gt;

var divsYoutube = document.querySelectorAll('div[id^="youtube"');
for(var i = 0; i &lt; divsYoutube.lenght; i++) {
 var strMessage = divsYoutube[i];
 strMessage.innerHTML = strMessage.innerHTML
                   .replace('&lt;p&gt;', '&lt;iframe ')
                   .replace('&lt;/p&gt;', '&gt;&lt;/iframe&gt;')
}

&lt;/script&gt;