Я внедряю 4 разных видео YouTube на одной и той же странице моего сайта, используя код, который я нашел ниже.
Я нашел скрипт, который не загружает видео до нажатия кнопки воспроизведения.Это работает очень хорошо.Кредит: Amit Agarwal.
У меня есть одна проблема, хотя он загружает одну и ту же миниатюру для каждого видео, и я не знаю, как ее изменить.Я пытался редактировать идентификаторы и переменные.
Я использую AVADA в Wordpress и просто вставил код DOM в каждый контейнер с другим img src.Это не сработало: -)
Есть предложения?Вот код:
<script>
/* Light YouTube Embeds by @labnol */
/* Web: http://labnol.org/?p=27941 */
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="PATH_TO_IMAGE">',
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);
}