<aside> 💡 This page contains the documentation for integrating a custom video player that only loads the video once it enters the viewport. 📹 Video Tutorial: WEBFLOW SITE SPEED: How to Optimize Videos - YouTube
</aside>
<aside> 💡 This solution works even better if you lazy load it using Google Tag Manager. We’ve made a tutorial on how to lazy load all scripts & third-party code you’re using. 👉 Check it out here (Video tutorial inside): Web Vitals: Fix Javascript & third-party issues.
</aside>
👉 Add the following code before the <body> closing tag inside your page settings. This code contains the main libraries that makes this custom video player works.
<aside>
💡 The code is already minified. We highly recommend serving the code using a lazy-loaded Tag Manager container. We’ve made a tutorial on how to lazy load all scripts & third-party code you’re using. Check it out here (Video tutorial inside): Web Vitals: Fix Javascript & third-party issues.
But you can also add the defer or async attribute.
</aside>
<script src="<https://cdn.jsdelivr.net/npm/lazy-load-video@latest/dist/custom-video.js>"></script>
<style>:root{--plyr-color-main:var(--colors--player-color)}.plyr{border-radius:8px!important}</style>
👉 The <style> code adds the basic styles for the lightbox video player. If you plan to use video lightboxes on other pages too, we recommend turning this embed into a Component.
<aside> 💡 Here’s the Webflow Color Variable that controls the player accent color:
</aside>
This solution is using MP4 video format. The reason why it’s using normal MP4 videos instead of third-party sources like Youtube, Vimeo, or Wistia is because such third-party video hosting platforms load their own code, scripts, and assets - which impacts even more your page load times. In this step, you’ll have to prepare your MP4 files and the posters. We recommend storing your mp4 videos on the following platforms:
For the static image posters, you can just upload them to Webflow and copy the URL of the asset by opening up the image settings and clicking on the ‘Link’ icon. This will copy the asset URL to your clipboard.
<aside> 💡 If you plan to use a looping background video, we highly recommend to trim it up to 3 seconds and match the video size with the size of the container it will leave on.
</aside>
<aside>
💡 For image posters, we recommend creating a blurred version that does not exceed the size of the video or parent container. Don’t forget to compress and convert your poster images into webp using this online tool.
</aside>
<aside> 💡 Make sure you do compress all of your videos too.
</aside>