[Support request] Lazy Load Embedded YouTube Videos (triggering with Elements by Post Tag)

[Eric]

Hey GP Team,

I’m trying to implement a YT embed tutorial found here:

https://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos–cms-26743

It should allow me to pull YT thumbs without loading the entire YT embed, helping the page load faster… unfortunately, I can’t get it to work and I wanted to ask what I am doing anything wrong?

I have loaded both the CSS style and javascript onto a single wphead Element that is triggered by Post Tag. The player loads as expected but it doesn’t pull any thumbnails and won’t load the video either.

Here is the code I am loading via GP Elements:

<style>

.youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
}
.youtube img {
    width: 100%;
    top: -16.82%;
    left: 0;
    opacity: 0.7;
}
.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}
.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
    cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
    position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
</style>

<script> 
	
	( function() {

    var youtube = document.querySelectorAll( ".youtube" );
    
    for (var i = 0; i < youtube.length; i++) {
        
        var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
        
        var image = new Image();
                image.src = source;
                image.addEventListener( "load", function() {
                    youtube[ i ].appendChild( image );
                }( i ) );
        
                youtube[i].addEventListener( "click", function() {

                    var iframe = document.createElement( "iframe" );

                            iframe.setAttribute( "frameborder", "0" );
                            iframe.setAttribute( "allowfullscreen", "" );
                            iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );

                            this.innerHTML = "";
                            this.appendChild( iframe );
                } );    
    };
    
} )();

</script>

Then the actual HTML div gets embedded onto the page via Gutenberg HTML Block:

<div class="wrapper">
    <div class="youtube" data-embed="PASTEYOUTUBEVIDEOID">
        <div class="play-button"></div>
    </div>
</div>

The player gets loaded but then stops there… it doesn’t seem to pull anything from YouTube. What am I doing wrong?

https://paste.pics/61a1446a41e76098a6bed430f07cc54c

[David]

Hi there,

if you can share a link to a page with the YT embeded etc then we can take a look to see if theres an obvious issue.

You can edit your original topic and use the Site URL field to share the link privately. Let me know.

[Eric]

Hi David, thanks for the reply! There you go, I’ve added the URL to my original message.

[David]

So remove the JS <script> from the WP_Head hook element and add it to a separate WP_footer Hook Element.

[Eric]

Awesome! it worked… thanks David!

[David]

You’re welcome – just to let you know when you have a JS function that is querying the elements on a page then it should go into the footer so the actual elements are loaded before the script is called. Otherwise the elements aren’t there to be found. The only time this may not apply is if the script is being fired on a user action such as a button click.

[Author]

Posts