How can I lazyload poster images from a video section lower on my website?

Technical Q&A
1

Hi, currently the 1st images that gets loaded on my website are the posters associated with video section, which are basically assigned using poster in video_tag.

{{
                block.settings.video
                | video_tag:
                  loop: 'loop',
                  muted: false,
                  playsinline: true,
                  autoplay: false,
                  onclick: 'vid_function(this);',
                  id: block.settings.video.id,
                  class: 'video-player',
                  poster: poster_path
              }}

My question is how to lazyload these poster images when the video section is much lower in website, and prioritize images of other sections which are much above the video section?

1 Like
2

JavaScript Implementation: Use JavaScript to detect when the video element is visible in the viewport and then set the poster attribute to its actual value.

{{
block.settings.video
| video_tag:
loop: ‘loop’,
muted: false,
playsinline: true,
autoplay: false,
onclick: ‘vid_function(this);’,
id: ‘lazy-video’,
class: ‘video-player’,
data-poster: poster_path
}}

Now, Please go to

  1. Online store
  2. Themes → Edit theme
  3. Layout
  4. theme.liquid and paste this code before

If it was helpful, then please like and accept it as a solution.