1

I use youtube iframe in my page, in order to speed up my site, I used $(window).on("load") to append the iframe after all is load, something like this:

$(window).on('load', function(){
    appendVideoAfterLoaded()
});
function appendVideoAfterLoaded(){
        html = '<div class="outside-video js-video"><iframe src="https://www.youtube.com/embed/UPhM_nd8wk4?enablejsapi=1&rel=0&loop=1&playlist=UPhM_nd8wk4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="youtube-player"></iframe></div>';
        $('.js-bg').append(html);
        previewVideo = '<img src="'+assets+'img/top/thumbnail_youtube.png" alt="GreenProp PV"><p class="btn-play"></p>';
        $('.js-open-popup').append(previewVideo);
    }

But the frame still loads before the page loaded and that affects google page speed inside score. Any solution? I use jquery 1.12.4, thanks

Narayan
  • 1,670
  • 1
  • 19
  • 37
Luu Hoang Bac
  • 433
  • 6
  • 17
  • 1
    Take a look at this post. https://stackoverflow.com/questions/10380787/load-iframe-after-page-load – Santosh Aryal Dec 26 '19 at 04:50
  • document.getElementById("myFrame").addEventListener("load", appendVideoAfterLoaded); try this Change add div id instead of myFrame after that load your function – Ram Dec 26 '19 at 05:16
  • @LuuHoangBac Can you add a small timeout in callling appendVideoAfterLoaded function ? I hope that will solve your issue – Ajith Dec 26 '19 at 07:22

1 Answers1

0

i hope this one help you.

use the function

  $(document).ready(function(){
//code here
});
Harjinder
  • 17
  • 2