This is a very clever idea via Arthur Corenzan. Rather than use the default YouTube embed, which adds a crapload of resources to a page whether the user plays the video or not, use the little tiny placeholder webpage that is just an image you can click that is linked to the YouTube embed.
It still behaves essentially exactly the same: click, play video in place.
The trick is rooted in srcdoc, a feature of <iframe> where you can put the entire contents of an HTML document in the attribute. It’s like inline styling but an inline-entire-documenting sort of thing. I’ve used it in the past when I embedded MailChimp-created newsletters on this site. I’d save the email into the database as a complete HTML document, retrieve it as needed, and chuck it into an <iframe> with srcdoc.
Arthur credits Remy for a tweak to get it working in IE 11 and Adrian for some accessibility tweaks.
I also agree with Hugh in the comments of that post. Now that native lazy loading has dropped in Chrome (see our coverage) we might as well slap loading="lazy" on there too, as that will mean no requests at all if it renders out of the viewport.
I’ll embed a demo here too:
Reader Tracey Rich said they needed to use ► instead of that Unicode play button.
As the author says, “it doesn’t work on mobile”, and it is precisely on mobile where the lazy load of YouTube iframes would be more useful.
https://dev.to/haggen/comment/ebn3
Hi Andy! I wouldn’t say “it doesn’t work on mobile” because most of it does. It’s just the autoplay part that won’t and the user will have to click again, since the first click was only to load the video. It still saves the junk that would get downloaded otherwise, and specially for mobile, those 500KB could hurt.
It still loads the …www-embed…/www-embed-player.js and en_US/base.js since its an iframe.
Also if used for multiple videos on a page, the iframe will load both files several times. How to prevent? Using div instead of iframe?
Very, very cool, I tried a lot of JavaScript
But this code is simple and the result is great
Thank you very much, that really benefited
Thank you very much I applied it on my website https://oraciondelamanana3.com and it worked BUT I notice that all the content that goes immediately after the video disappears and I don’t know why that happens or rather I don’t know where the content goes
in the url -> https://oraciondelamanana3.com you will see that there is a video and below there is content and even related entries
but when I use this code for videos, immediately after the video all the content DISAPPEARS -> https://gyazo.com/e025c053fa0c2b4e8eabf0dcce6fb9da
Any way to make the lazy load for youtube not break the content please
I noticed that disabling my ad blocker resulted in this method throwing a console error over and over (multiple times per second) until the iframe is clicked.
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://www.youtube.com’) does not match the recipient window’s origin (‘https://www.mydomain.com’).
I’ve tried adding enablejsapi=1 and origin=https://www.mydomain.com to the embed URL, but neither prevented the error. Anyone else having this issue?
Please take a look at https://github.com/paulirish/lite-youtube-embed, which was just announced by Paul Irish @ Chrome Dev Summit 2019, it uses a custom element and renders only the preview image. Scripts and embed are loaded when you click the play button.
This method no longer autoplays. Requires two clicks to play the video (atleast in Chrome)
Looks like with
&autoplay=1at the end of the original iframesrcit works. I’ve updated the embed to have that.Looks like adding &autoplay=1 or ?autoplay=1 is not working again in Chrome and Safari. It works in Firefox.
Hmm, it’ll work in Chrome + Safari if you add in &mute=1 to &autoplay=1. But that’s not the expected behavior when a user hits play, so that’s annoying too.
You need to add this…
Cool trick! I implemented this with the difference that there’s no arrow css; but instead on hover, there’s a quick js click. This means the preview image is loaded initially, and as you hover, the embed loads, and if you’re patient enough, you can click on > in a bit.
Still two taps on touch devices, but at least the page doesn’t die when you have dozens of videos.