Iframe optimizations

[Wyatt-Lutz]

Lazy Loads iframes for youtube videos on home and news pages by creating the iframe element only after the thumbnails for the youtube vidoes are clicked.

[Naviary2]

Can you show a video of what this looks like, and interact with it?

First impression is this looks kind of looks like a personal preference thing.. what issue does this solve?

[Wyatt-Lutz]

Its a performance boost on page load times, especially for those with poor internet speeds or devices with limited memory resources. Most users in any given site visit will not watch the youtube videos so its unnecessary to fetch them with they aren't required. It also allows you to keep adding youtube videos to the news page without hindering the performance with each video.

Lastly, say the iframe fails to fetch the youtube videos for some reason, it won't create any ui problems until someone wants to watch one of the video.

I do need to make it clearer to users that this is a video though. I can work on that.

unknown_2024.07.17-15.18.1.mp4

[Naviary2]

Since this is exactly the same as index.js, I would just combine them into something called like iframeLazyLoader.js, and have both pages request that.

[Naviary2]

Okay! Seems nice! The only thing I'm worried about is it'll be annoying to have to add the thumbnail to the server files and link it with every new video. Youtube's share button gives you a copyable iframe element which all you need to do is paste, nothing else. Can the thumbnail stuff be automated? Does youtube have a url you can go to to download the thumbnail of a video?

The videos on the news page are a little large, could you also shrink their size?

[Wyatt-Lutz]

Yes, I can automate the thumbnails.

[Naviary2]

Hey just checking in, seeing if you were still working on this!

[Wyatt-Lutz]

Yes, my bad, I have been busy lately.

[Naviary2]

All good! No rush then

[NoobJsPerson]

my site uses this strategy. i think this link https://img.youtube.com/vi/${videoId}/0.jpg automatically gives you the thumbnail from the video id. https://img.youtube.com/vi/${videoId}/1.jpg seems to give you a smaller version if thats needed

[Naviary2]

Closing due to inactivity, if more progress is made on this feel free to open up another PR!