Embedding code into a website

Question

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:

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

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.

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

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

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

<script type=”text/javascript”>

var strMessage = document.getElementById("youtube1");
strMessage.innerHTML = strMessage.innerHTML
                   .replace('<p>', '<iframe ')
                   .replace('</p>', '></iframe>')

var strMessageTwo = document.getElementById("youtube2");
strMessageTwo.innerHTML = strMessageTwo.innerHTML
                   .replace('<p>', '<iframe ')
                   .replace('</p>', '></iframe>')

var strMessageThree = document.getElementById("youtube3");
strMessageThree.innerHTML = strMessageThree.innerHTML
                   .replace('<p>', '<iframe ')
                   .replace('</p>', '></iframe>')

</script>

The script is so simple so there is nothing to review here. Select multiple elements via querySelectorAll, then iterate the list. — Pavlo
– Pavlo, Commented Oct 2, 2015 at 11:21
I suggest you to updated extended_valid_elements as described here: tinymce.com/wiki.php/Configuration:extended_valid_elements — Valentin Podkamennyi
– Valentin Podkamennyi, Commented Oct 15, 2015 at 14:00

Toni Villena · Accepted Answer · 2016-06-11 21:48:01Z

2

You can use querySelectorAll how @Pavlo says in his comment. It would work:

<script type=”text/javascript”>

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

</script>

answered Jun 11, 2016 at 21:48

Toni Villena

1214 bronze badges

Add a comment |

Stack Exchange Network

Embedding code into a website

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Embedding code into a website

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions