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

Home Forums Support Lazy Load Embedded YouTube Videos (triggering with Elements by Post Tag)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #943502
    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.dataset.embed +"/sddefault.jpg";
            
            var image = new Image();
                    image.src = source;
                    image.addEventListener( "load", function() {
                        youtube[ i ].appendChild( image );
                    }( i ) );
            
                    youtube.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

    #943616
    David
    Staff
    Customer Support

    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.

    #943670
    Eric

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

    #943682
    David
    Staff
    Customer Support

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

    #943696
    Eric

    Awesome! it worked… thanks David!

    #943699
    David
    Staff
    Customer Support

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.