Tentando fazer lazyLoading

    const getVideos = function(){
        const id = $("main").attr("id");
        const datasend = { action: 'getVideosPage', id_page: id };
        $.ajax({
            type : "GET",
            data: datasend,
            dataType: "json",
            url: ajaxLoad_ajaxurl,
        //beforeSend: console.log("loading"),
        success: ( data ) => {
            if(typeof data != "undefined" && typeof data !== null && typeof data != undefined) {
                getThumbnails(data);
            }else{
             console.log("Error");
         }
     }
 });
    };

    const getThumbnails = ( data ) => {
        let videosLinks = ""+data.urls.map( fullUrl => {
            return fullUrl.split('watch?v=')[1];
        });

        fetch(`https://www.googleapis.com/youtube/v3/videos?id=${videosLinks}&key=AIzaSyB-IJknHsbodH4-ZkVVJOpPdF-W1GDgamU&part=snippet`)
        .then( response  => response.json())
        .then( response => {
            response.items.forEach( createThumbnail );
        }).then(() => {
             $('.vp-on-pageload-wrap').load("?vp_on_pageload=t");
        })
        .catch( e => console.log(`Erro: ${e}`));

    };

    const createThumbnail = (item) => {

        var image = new Image();

        let snippet = item.snippet;
        image.src = snippet.thumbnails.high.url;
        let titulo = snippet.title;

        image.addEventListener("load", ()=> {
            let thumbs = `
            <figure>
            <a href="https://www.youtube.com/watch?v=${item.id}" class="vp-s">
            <div class="play_button card yt_play">
                <span class="icon-play3"></span>
            </div>
            </div>
            <img src="${image.src}">
            </a>
            <h3>${titulo}</h3>
            </figure>`;

            $('.videos').append(thumbs);
        });
    };


    if($("#clips").length)
        getVideos();