Wrap iframe in div column
<p>I embedded youtube video using thumbnails by following this tutorial <a href="http://www.labnol.org/internet/light-youtube-embeds/27941/" rel="nofollow">http://www.labnol.org/internet/light-youtube-embeds/27941/</a>. </p>

<p>html:</p>

<pre><code>&lt;div class="col-md-3 col-sm-4 col-xs-12" data-wow-duration="500ms" data-wow-delay="600ms"&gt;
  &lt;div class="wrap-about"&gt;
    &lt;div class="note"&gt;
      &lt;div class="media-wrapper"&gt;
        &lt;div class="youtube-player" data-id="l-XfztB0yss"&gt;&lt;/div&gt;                                        
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>javascript:</p>

<pre><code>&lt;script&gt;

document.addEventListener("DOMContentLoaded",
    function() {
        var div, n,
            v = document.getElementsByClassName("youtube-player");
        for (n = 0; n &lt; v.length; n++) {
            div = document.createElement("div");
            div.setAttribute("data-id", v[n].dataset.id);
            div.innerHTML = labnolThumb(v[n].dataset.id);
            div.onclick = labnolIframe;
            v[n].appendChild(div);
        }
    });

function labnolThumb(id) {
    var thumb = '&lt;img src="https://i.ytimg.com/vi/ID/mqdefault.jpg"&gt;',
        play = '&lt;div class="play"&gt;&lt;/div&gt;';
    return thumb.replace("ID", id) + play;
}

function labnolIframe() {
    var iframe = document.createElement("iframe");
    var embed = "https://www.youtube.com/embed/ID?autoplay=1";
    iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("allowfullscreen", "1");
    this.parentNode.replaceChild(iframe, this);
}

&lt;/script&gt;
</code></pre>

<p>The problem is how I want to wrap the iframe if the iframe is in javascript file where it supposedly to be in the html file.</p>