Difficulty replacing embeded iframe video with custom script..

  • Newblar here, and I’m try to replace an iframe I have on my front page with a script to load the video contents only when clicked to decrease page load time. I’ve been following the example from this site (https://www.labnol.org/internet/light-youtube-embeds/27941/). My embeded video link: “https://www.youtube.com/embed/BeQl6qHVq8I”

    This is the html I inserted into a text widget on my front page:

    <div class=”youtube-container”>
    <div class=”youtube-player” id=”BeQl6qHVq8I”></div>
    </div>

    I copied and pasted the script and CSS onto my site into the appropriate areas, but the video does not load any image.
    my site: (https://new.renaissanceeuropeanspa.com/)

    I’ve been playing around with this for a couple hours now and it’s driving me insane trying to figure it out. Can someone show me the light on this?

    ~thanks in advance ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I copied and pasted the script and CSS onto my site into the appropriate areas,

    It’s important for us to know where you pasted the script.

    Thread Starter psychosomatic

    (@psychosomatic)

    both css and the script i used went into the head. (now the site is https://www.renaissanceeuropeanspa.com).

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What was the script? So that we know what to look for

    Thread Starter psychosomatic

    (@psychosomatic)

    Andrew, thanks for the reply. The example I am following is from (https://www.labnol.org/internet/light-youtube-embeds/27941/).
    Script below:

    (function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();

function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}

function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}

    I posted this script inline into my <head>. I’ve tried several variants of this, modifying the script with my video ID, into and out of text widgets, and still no luck ?? Any ideas?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I don’t see the element with the class “youtube-player” on the Home page. You can search too here: view-source:https://www.renaissanceeuropeanspa.com/

    Thread Starter psychosomatic

    (@psychosomatic)

    I have it disabled right now. But when I was trying to congigure it, I inserted the HTML into a text widget, the CSS, and the script into the head with no results. I will try again right now..

    Thread Starter psychosomatic

    (@psychosomatic)

    nm I had to remove it.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try putting that JavaScript at the bottom of your page, before the </body> tag. If you put it at the top then it will run before the page has loaded.

    Thread Starter psychosomatic

    (@psychosomatic)

    I tried that, and putting the script directly in the text widget with no luck :/

    Thread Starter psychosomatic

    (@psychosomatic)

    hey Andrew,
    Finally got it working! The problem was my thumbnail images weren’t loading properly. Here is my version of the script I used (just changed the thumb string names from original script):

    <script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();

function labnolThumb(id) {
    return '<img class="youtube-thumb" src="https://img.youtube.com/vi/' + id + '/0.jpg"><div class="play-button"></div>';
}

function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>

    Thanks for the help, I appreciate it.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Difficulty replacing embeded iframe video with custom script..’ is closed to new replies.