Slow page with multiple iframes-CodePudding

I have page with 20 modals and every each of them opens an iframe with youtube video in it. The problem is that the page is painfully slow because of it. Do you have any suggestions how can I fix this? Another thing is that I'm getting this error:

The service worker navigation preload request was cancelled before 'preloadResponse' settled. If you intend to use 'preloadResponse', use waitUntil() or respondWith() to wait for the promise to settle.

CodePudding user response：

On page load, browser is trying to download all the youtube videos.
So it gets slow.
If you load videos on modal click, page load time will be better.
Something like that:

function domReady(callback) {
    document.readyState === 'interactive' || document.readyState === 'complete' ? callback() : document.addEventListener('DOMContentLoaded', callback);
}

domReady(function () {
    const videoModals = document.getElementsByClassName('video-modal');

    Array.from(videoModals).forEach((el) => {
        el.addEventListener('click', function () {
            // load video
        });
    });
});