ДОМ Элемент - Youtube видео - PullRequest
       0

ДОМ Элемент - Youtube видео

0 голосов
/ 04 февраля 2019

Я внедряю 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);
}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...