One thing that people forget or dont know is that you can lazy load an iframewith loading=lazy (Firefox is a laggard in support however and Safari has it behind a flag). This will spare you the upfront cost of loading the video scripts and give a faster page load if you do have to go the iframe route.
I'm a web developer, graphic designer, type designer, musician, comicbook-geek, LEGO-collector, food lover … as well as husband and father, located just south of Copenhagen, Denmark.
I was going to look into this soon as well! I saw this article on lazy loading youtube vidoeos recently, How to lazy load YouTube videos with vanilla JavaScript , and wanted to investigate it.
One thing that people forget or dont know is that you can lazy load an
iframe
withloading=lazy
(Firefox is a laggard in support however and Safari has it behind a flag). This will spare you the upfront cost of loading the video scripts and give a faster page load if you do have to go theiframe
route.Yes, good point! It's only Chrome for now, but Safari has lazy-load for iframes behind a flag in v16. Firefox status is unknown.
Yep. Let's hope Firefox follows suit soon.
Considering so many embedded videos are sourced from youtube, it is an important one IMO. I just try to avoid YouTube altogether.
I wrote about lazy-loading videos a while back, you can use
preload="none"
and the video file is only downloaded when the user hits play.Native lazy-loading - Why doesn't the video element have it?
Rob OLeary ・ Mar 28 ・ 4 min read