Performance issues: Preloading almost 20MB -> A way to lazy load?

pupunzi / jquery.mb.YTPlayer

use a custom yutube player for a video as background on jQuery framework

https://pupunzi.com/mb.components/mb.YTPlayer/demo/demo.html

1.32k stars 429 forks source link

Performance issues: Preloading almost 20MB -> A way to lazy load? #474

Open iadmemoriam opened 3 years ago

iadmemoriam commented 3 years ago

Hello guys! I'm using this plugging and i'm getting like 40 connections to different videoplaback requests.

Do you know about an easy way of lazy load them?

Currently: 1) showing the carousel with the preview images and a div over it with a big image and a play button 2) When i click the play button I play the video on full screen

But the problem is that all the videos are being pre-downloaded. Ideally I would love to load them only when i click on their carousel image. Any idea on how to do that? Is there a native way in this lib to avoid predowloading everything?

luukee commented 1 year ago

Agreed. https://www.youtube.com/s/player/4248d311/www-widgetapi.vflset/www-widgetapi.js, https://www.youtube-nocookie.com/s/player/4248d311/player_ias.vflset/en_US/base.js, and https://www.youtube.com/iframe_api are slowing down our pages even though the video's are 60% down the page and only play if a user clicks the play button.

Would be nice to call the video (and all associated scripts) on click or something.

pupunzi commented 1 year ago

Hi, you can use an image placeholder in your carusel ad initialize the player only if the image is clicked. This would prevent the preload of all the videos