div列にiframeをラップします

Question

このチュートリアルの後にサムネイルを使用して埋め込んだyoutubeビデオhttp://www.labnol.org/internet/light-youtube-embeds/27941/。

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> 

問題は、私はそれはおそらくhtmlファイルであることをどこIFRAMEのJavaScriptファイルである場合にはiframeをラップする方法です。

Answer 1

私は、あなたがラップしたいdivにyoutubeに埋め込み、それをセットするコードを取る方が簡単だと思います。 Youtubeでは、コードをコピーして幅の高さやその他の高さでパーソナライズするチャンスを与えます。