Youtube videos slowing down page – JS or Plugin suggestions

  • site page is https://www.horsemanshipdentistry.com/horse-dental-faq-videos/

    30 videos in iFrames are slowing the page down. I’ve tried several plug ins and JS code but nothing seems to work. I even have a test page with a Text element just to double check for I thought maybe some of the plug ins or code won’t work in an accordion? Please help.

    Code that should work:
    <div class=”youtube-container”>
    <div class=”youtube-player” data-id=”VIDEOID”></div>
    </div>

    JS installed on the page:
    <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=”//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);
    }
    </script>

    CSS installed on the page, and also attempted on the Child Theme CSS
    <style>
    .youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
    .youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
    img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
    div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url(“https://i.imgur.com/TxzC70f.png&#8221;) no-repeat; }
    #youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
    </style>

Viewing 7 replies - 1 through 7 (of 7 total)

  • Why aren’t you just embedding the videos using the standard YouTube embed code? Or using the built in WordPress embeds? Surely they would be simpler than the crazy Javascript you have above. Or do you need to do something specific that I’m missing?

    Thread Starter kvilla

    (@kvilla)

    I just need to have 30 videos on the page in an accordion and only play/load when clicked on. <iframe> code is what youtube gave me. What do you recommend for standard YT embed code?

    The standard iframe code should be fine without the need for all that javascript. You could have a look into lazy loading the videos when the accordion is opened so it doesn’t slow down you page, only loading the video when you need it.

    Thread Starter kvilla

    (@kvilla)

    I looked into lazy loading and even replacing <iframe> with embed code and it didn’t seem to take. I’m wondering now if maybe it need much more time to become live/take effect esp on this page with 30 videos? On a test page I even have a text element to test plugins or other types of coding but I’m not even getting the video or image block to show. GS – I’m not sure what a “standard” embed YT code is? I’ve tried some embed code using a few plug ins as help only to not get results.

    Thanks,
    ~K

    When you click on embed in the share box under the video it gives you an embed code which I would consider ‘standard’. You could call it ‘default’ if you like, provided straight from YouTube:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/-XXXXXXXXXX" frameborder="0" allowfullscreen></iframe>

    If I get some time later I’ll have a go with lazy loading and see what I come up with.

    Thread Starter kvilla

    (@kvilla)

    I have not seen the embed before the slash before, and still in an iframe. I’m going to try it and hopefully works globally and cross platform.

    I’m working off X Theme and Cornerstone but also experimenting with Avada on another site. Overall thoughts? I’m not sure or too fond so far of accordions – limited and may slow down page if a bunch? They look good. More Avada video Youtube testing today.

    Thread Starter kvilla

    (@kvilla)

    Actually, I’m sorry I do have embed in the url. This is what I have currently live:

    <iframe style=”border: 2px solid #E06300;” width=”480″ height=”360″ src=”https://www.youtube.com/embed/IXu6taA0RMA?rel=0&showinfo=1&#8243; frameborder=”0″ autoplay=”1″ allowfullscreen></iframe>

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Youtube videos slowing down page – JS or Plugin suggestions’ is closed to new replies.