Before we begin, there are 2 things we have to explain which will be used in our example.
- CDN - Cloud Delivery Network
- Auto Video - Automatically play and pause videos based on if they are in the viewport
As a CDN for our use case we will use Google Cloud. We also can use Azure (Microsoft Cloud) or AWS (Amazon Web Services) or any other CDN out there.
Why CDN?
We live in a world where internet is everywhere. Everyone of us want to load page instantly - when we click we want to see the page right now. When it comes to videos - their size can be higher than images. CDN is a place where you put your file (video) and its loaded fast because of the cloud network behind it.
Auto Video Plugin
The plugin is made by Finsweet and its great because it just works as it should be. You can check their documentation here which is very simple - only 1 step:
Copy the Auto Video <script> and paste into the <head> of your page
<!-- [Attributes by Finsweet] Auto Video -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-autovideo@1/autovideo.js"></script>
Description of this plugin:
All videos on the page (Background Video components & <video> elements used in HTML Embeds) play and pause based on if the video is visible in the viewport.
Okey, let's focus now on our video example. First prepare your video you want to display on your page. Go to your CDN bucket and upload the file.
Once we uploaded and copied URL of a video we can go to Webflow page.
And this is it! It's done. Now you should see even large videos to load instantly when you visit a page.
