我按照本教程使用缩略图嵌入了 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>
问题是如果 iframe 在 javascript 文件中,而它应该在 html 文件中,我想如何包装 iframe。
最佳答案
我觉得把代码嵌入到youtube里,然后设置在你要包裹的div里会更简单。 Youtube 让您有机会复制代码并使用宽度和高度等对其进行个性化设置。
关于javascript - 在 div 列中包装 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40253724/