How do I use "eager" lazy loading in chrome with video posters?

Viewed 653

Based on my reading of this article on Google's developers' site, and my memory of how my site used to work, it seems like lazy loading has become the new default. That's cool! However, I'm running a site that people use to browse a media library, and lazy loading adds a bit of visual jank, so I'd like to disable it in this case.

I understand that I can add loading="eager" as an attribute of the img tag, however, the way my site works is i display a grid of 60x video elements and use the poster attribute to display an image until the user hovers over and then a super-low-res video preview plays.

loading="eager" doesn't seem to work for the posters of video elements. What should I do?

Here's my codeblock:

<video loading="eager" class="hoverToPlay" muted loop 
 preload="none" src="../media/?clip=1297&q=q" 
 poster="../media/?clip=1297&q=t"></video>
0 Answers
Related