在 div 列中包装 iframe

Question

我按照本教程 http://www.labnol.org/internet/light-youtube-embeds/27941/ 使用缩略图嵌入了 youtube 视频。

html:

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

javascript：

<script>

document.addEventListener("DOMContentLoaded",
    function() {
        var div, n,
            v = document.getElementsByClassName("youtube-player");
        for (n = 0; n < 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 = '<img src="https://i.ytimg.com/vi/ID/mqdefault.jpg">',
        play = '<div class="play"></div>';
    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);
}

</script>

问题是如果 iframe 位于应该位于 html 文件中的 javascript 文件中，我想如何包装 iframe。

Answer 1

我认为将代码嵌入 youtube 并将其设置在要包装的 div 中会更容易。 Youtube 让您有机会复制代码并使用宽度和高度等进行个性化设置。