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
<div class="spott-video-embed" .... data-preload="none">
To your Spott video iFrame embed, add the following parameter marked in bold.
<iframe src='https://static.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.
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