Great post. I wrote a reply on my blog about better support: remysharp.com/2019/08/09/redux-laz... - but the TL;DR is: add the src attribute as a fallback for when srcdoc isn't supported 👍
Well pointed out. I have edited the post. Thank you!
I mocked one up on CodePen: codepen.io/aardrian/pen/pMVWxQ
Debug view: s.codepen.io/aardrian/debug/pMVWxQ
Great suggestions! I have edited the article to reflect this change. Thank you!
The video is not autoplaying on my mobile device, a Moto G4 Play. For some reason I have to double click 😞
Using autoplay is not ideal, as more and more browsers, especially mobile ones, don't support it. This means that on these browsers, you will have to double tap/click, which feels a little bit clunky in my opinion.
That's true, it doesn't work on mobile and it's not ideal but I still think it's better than having your users download half a megabyte of junk. I've been thinking about it although I haven't found a good alternative just yet. In any case I should point this out in the post. Thank you for your comment!
Here's a CodePen: codepen.io/jelle619/pen/yLBVyWY
If you don't like using this method, you could still make videos automatically play on browsers which, on the surface, don't seem to support autoplay. Some browsers have started blocking autoplay because it allows web pages to play sound without the user's permission which can be unwanted. However, in many instances, browsers that do this will still allow autoplay when the video has been muted.
Can I haz <lazy-youtube> web component? 😁
My exact same thoughts. This wants to be abstracted away.
Clearly you originally used the video youtube.com/watch?v=27rhHfBugnc then changed your mind but didn't update the IMG SRC URLs, which makes it a little confusing (especially the bit about the YouTube URL schema for video thumbnails) so please update code snippets 2/3/4 accordingly! ;)
You're most correct, sir. The thing is I checked those so many times and it still slipped. 😅️ Well, it should be fixed now. Thank you!
Very nice and simple solution.
Speaking from personal experience having worked on the past with video heavy website.
Now it might as well be a video light website. 😂️
Might as well add the loading="lazy" attribute to the iframe (or even the IMG tag) for bonus lazy loading.
Great find! I didn't know this feature also supports iframe... 😅 I hope it will be introduced to other browsers besides Chrome soon.
For anyone who would also like to compare the approach explained on this page with other approaches: I used github.com/mike-zarandona/PrettyEm... back in the time.
This is a great technique. Thanks.
I use this method for lazy-load video
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.