Videos don’t lazy-load

Hey Laci,

for me, it seems to work. Lazy loading video elements means, that it will lazy load a poster image if set (not the case for your videos) and sets the preload attribute to none, so the browser does not start loading the video. The class switches to lazyloaded when in viewport and the preload is changed to auto, so that looks good to me.

The second video is not displayed for me, but that seems to be a problem with the video file. I get an error from my browser when I try to open the video URL.

Best,
Florian

Thanks for the quick reply, Florian!

I was unaware of the poster attribute, and just added it, but according to Chrome Developer Tools, the videos still get loaded upon loading the page without any scrolling.

Any further ideas?

Hi Laci,

Thanks for the quick reply, Florian!

You’re welcome.

Hm, maybe it does not work with the autoplay attribute.

The MDN video element article says:

The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the video for playback.

Best,
Florian

Thanks Florian! This may be a lazysizes issue, so I’ve just opened an issue in their repo. I strongly believe that autoplay videos should be lazy-loadable in some way, possibly via JavaScript. It makes sense usability-wise.

• This reply was modified 5 years, 6 months ago by mondalaci.

Hi Laci,

yes, good idea. Maybe it can be included somehow. I will keep this open until the issue in the repo is resolved in some way.

Best,
Florian

Hi Laci,

I published a beta version of Lazy Loader that contains the new lazysizes version and modifies the markup of autoplay videos, so the lazy loading should work for them. Could you give it a try and let me know if it works like expected? You can find the version on GitHub (https://github.com/florianbrinkmann/lazy-loading-responsive-images/releases/tag/v5.1.0-beta.2 – it is the lazy-loading-responsive-images.zip).

Thanks,
Florian

• This reply was modified 5 years, 4 months ago by Florian Brinkmann.

Hi Florian,

Just installed the linked plugin version. It shows version 5.0.0 in WordPress, but I assume you might have forgot to update its version number.

Unfortunately, the videos still get loaded on page load without any scrolling involved. This is the markup of the first video:

<div style="text-align: center;"><video style="max-width: 100%;" poster="/wordpress/wp-content/uploads/2019/09/module-animation-poster.jpg" autoplay="autoplay" loop="loop" muted="muted" width="1280" height="100%">
<source src="/wordpress/wp-content/uploads/2019/07/module-animation-5.mp4" type="video/mp4" />
</video></div>

Any ideas why it’s not working?

Really appreciate your work and help!

– Laci

Hi Laci,

yes, I will update the version number when the final release is published, thanks ??

I checked the scripts that are loaded on your site and it seems that one that is needed for the video feature is not loaded. Do you have the option for video lazy loading enabled? You can find it under ?Settings? ? ?Media? ? ?Lazy Loader options?.

Best,
Florian

You’re totally right, Florian! I did forget checking the “enable lazy loading for videos” option of your plugin.

I’ve just enabled it, and lazy loading for videos is working! ??

Thank you so much for making this happen! Yours is the most capable lazy loading WordPress plugin of all.

You’re welcome, great to hear that it works now and that you like the plugin! ??

Marking this as resolved.