Lazy load thumbnail image

[Fox32]

Is your feature request related to a problem? Please describe.

Running a lighthouse audit on my side, I get the following suggestion:

Defer offscreen images

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive. Learn more.

Describe the solution you'd like

I would like to lazy load the thumbnail image to save bandwidth and load time, especially if the video is embedded at the bottom of my page. Maybe the feature is configurable on the enabled.

Describe alternatives you've considered
None

Additional context
Right now a background image is used for the thumbnail. It's not possible to use the native lazy loading for background images. Maybe we have to switch too using an <img> tag instead. We could still stack the image, iframe and button over each other. The only problem I see is centering the image and keeping it's aspect ration, but that should be possible too.

[ibrahimcesar]

🎉 Addressed at #47, already in latest version!

[Fox32]

Are you sure? I don't want to replace the image, I just want to instruct the browser to lazily load it.

[ibrahimcesar]

Ok @Fox32 , back to issues, this is a simple one, maybe I'll add as a sensive default also! Thanks!

[ibrahimcesar]

This is was one of these things you think you be easy but... We don't use the <img> element for our post image. We use the element <link> with the attribute as="image".

react-lite-youtube-embed/src/lib/index.tsx

Line 86 in f7092b1

as="image"

I don't think the lazy option is available outside the <img> element in a native form.

I think this lib you at the time not able to provide this exactly option because of implementation (an is already using preconnect), the strategy to this would require a extra step to lazy load the component itself with a wrapper. Just to let you know I will not ship it as fast I think I would!

Thanks,

[bnteau]

Hi team, I'm currently facing this same issue and I can't find any solution somewhere else. Do you have a solution to lazy load the thumbnail now? Using the 2.4.0 version of your lib.

Thanks for your help

[bhaveshxrawat]

@Fox32 and @bnteau You could try using this package that uses <picture> tag to load the most appropriate thumbnail image based on the device's screen size, resolution, and other factors with native lazy loading.

package: https://www.npmjs.com/package/react-youtube-liteframe?activeTab=readme