Guide for speeding up page load times with embedded YouTube videos
When embedding a YouTube video on your website, you may notice a big drop in the page's loading time. Running your website through checks like GTMetrix or YSlow will show that the YouTube video player is causing render blocking and suggests you Eliminate render-blocking resources. One approach to limit the impact of the embedded YouTube player on your page's load time is to defer loading the player until it's needed. If your website already uses jQuery version 1.7+ you may find the Lazy Load XT jQuery plugin helpful to defer the loading on the YouTube player.
Lazy Load XT jQuery plugin
Download the latest Lazy Load XT javascript file jquery.lazyloadxt.extra.min.js from https://github.com/ressio/lazy-load-xt
Once downloaded, upload the file jquery.lazyloadxt.extra.min.js to your webserver and make a note of where you have uploaded it. For example, when using Joomla upload it to the js folder of your template.
Defer YouTube Video iframe code
Find the iframe embed code for your YouTube video you wish to defer and change the existing code
<iframe ... src="https://www.youtube.com/embed/.... ></iframe>
to
<iframe ... data-src="https://www.youtube.com/embed/... ></iframe>
Changing the src path to a data-src path will trigger the Lazy Load XT script and prevent the iframe from initially loading, and will instead load when the site visitor scrolls to the video.
References
https://www.smashingmagazine.com/2015/02/redefining-lazy-loading-with-lazy-load-xt/
https://github.com/ressio/lazy-load-xt