Lazy load embedded YouTube videos

Arthur Corenzan on August 07, 2019

I was working on this simple static website that should have an YouTube video displayed right on the landing page. So I went my merry way, hopped o... [Read Full]
markdown guide
 

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!

 

Three suggestions:

  • add a title attribute to the <iframe> (excluding it is a WCAG failure, one which Google continues to ignore),
  • consider a method to put a "Play" image over the video thumbnail so users understand it will play a video, and not just send them to a new page or load an image,
  • put an alt attribute on the image.

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!

 

YouTube has an JavaScript-based embed API. In HTML, you can defer external JavaScript until the page has finished parsing. This way, the video player will only load after other parts of the page have been loaded first. While this won't decrease the amount of data that will get downloaded or prevent tracking by Google, it will allow people with a poor internet connection to comfortably view the page whilst the video player is taking its time to load in the background.

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. πŸ˜‚οΈ

 

I really like this; glad to see it working without javascript. Think I need to give it a shot!

 

Might as well add the loading="lazy" attribute to the iframe (or even the IMG tag) for bonus lazy loading.

web.dev/native-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.

 
 
code of conduct - report abuse