Lazy load of video

Lazy loading or asynchronous loading means that the big chunk of the data will only load when your end users need it. This means that fewer data will be loaded when first loading the webpage, and is especially handy when serving a lot of videos on the same page.

 

Lazy loading for Spott videos can be set up quite quickly, for the moment it requires a small bit of code tweaking. 🤓

Enabling lazy loading

When you've already generated an embed code, you simply have to add a parameter to it. The parameter depends on whether you are using Javascript or iFrame embeds, both are listed here.

 

Javascript embed

To your Spott video Javascript embed, add the following parameter marked in bold.

<div class="spott-video-embed" .... data-preload="none">

 

iFrame embed

To your Spott video iFrame embed, add the following parameter marked in bold.

<iframe src='https://static-tst.spott.ai/videoplayer/?videoId=....&preload=none' ></iframe>

 

The lazy loading is now enabled, if you have some technical knowledge, you can make sure it's working by opening the Network tab in your browser and run the two scenarios side by side.

 

 

Additional settings

Set a preview image

You may have noticed that your preview image is black now. This is because normally Spott loads the first frame of your video. As lazy loading is enabled, we can no longer use the first frame. Check out this article to manually set a poster image.

 

Turn off Autoplay

If you're having trouble enabling lazy loading, make sure autoplay is turned off when generating the embed code.

 

Or manually adjust the embed code by setting data-autoplay="false" (Javascript) or autoplay=false (iFrame).

Was this article helpful?
1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.