Use YouTube thumbnails rather than embeds to reduce page size?

[dfardon]

Hi, we have a website that uses a lot of YouTube video embeds to showcase a client’s work, sometimes 10 or more on a page. This makes the pages extremely large and very slow to load fully. (https://www.jeandidieraissy.com/)

This article describes a way to populate the page with video thumbnails rather than the full embed code, and only load the video if the thumbnail is clicked: https://www.labnol.org/internet/light-youtube-embeds/27941/

How would we implement this in X? Or is there another way we could achieve the same thing?

Thanks,

David

[rad]

Hi David,

Thanks for reaching out.

It shouldn’t be theme specific, the procedures are provided there and you should implement them. Just make sure, the actual video container is added to the content or builder video element. Like this

<div class="youtube-player" data-id="VIDEO_ID"></div>

That replaces the usual iframe embed.

The rest of the code like CSS and javascript should be implemented with wp_footer or wp_header to child theme’s functions.php. Please check this https://wpshout.com/quick-guides/wp_footer/. Example,

add_action('wp_footer', 'my_awesome_code_here'); 
function my_awesome_code_here() { ?>

<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="https://i.ytimg.com/vi/ID/hqdefault.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>

<style>
    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    
    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    
    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
    
    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }
    
    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }

</style>

<?php }

Thanks!

[dfardon]

Great, thank you, that works a treat!

[Prasant]

You are most welcome.