|
1 | 1 | # lazy-load-bg-video |
| 2 | + |
2 | 3 | Lazy loading background videos in Webflow with vanilla-lazyload |
| 4 | + |
| 5 | +Clone an example site from Made in Webflow: |
| 6 | + |
| 7 | +https://webflow.com/made-in-webflow/website/background-vid-test |
| 8 | + |
| 9 | +## vanilla-lazyload |
| 10 | + |
| 11 | +[vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) is a super lightweight JavaScript library to help lazy load videos using the Intersection Observer API (which isn't compatible with [older browsers](https://caniuse.com/?search=intersectionObserver)). |
| 12 | + |
| 13 | +If you need to support older browsers, you can look into [yall.js](https://github.com/malchata/yall.js) (Yet Another Lazy Loader). |
| 14 | + |
| 15 | +For a good overview on why you may want to lazy load videos and the strategy do so, please review: |
| 16 | + |
| 17 | +https://web.dev/lazy-loading-video/ |
| 18 | + |
| 19 | +The tldr; lazy loading videos will help with site performance for background video elements below the fold, especially on mobile devices. |
| 20 | + |
| 21 | +## How it's done |
| 22 | + |
| 23 | +### The HTML |
| 24 | + |
| 25 | +First, you're going to want [a page in your style guide](https://webflow.com/blog/how-to-build-a-living-style-guide-in-webflow) dedicated to components where the native Webflow element can permanently live. |
| 26 | + |
| 27 | +Add in your background video element here and style it however you like. Once complete, publish the page and then open the live site where the element lives. |
| 28 | + |
| 29 | +Right click to inspect it and once you have it selected in dev tools. Right click and copy the element. |
| 30 | + |
| 31 | +Now we need to modify the code a little bit so paste this into an IDE, a Webflow embed block, or a plain text editor. |
| 32 | + |
| 33 | +On the video element we'll add a `class="lazy` and `preload="none"`. Then on the sources inside it, we'll change the `src` of the video to `data-src` and add `type="video/mp4"`. Of course you'll want the type to match, so set `webm` for WebM videos or `ogg` for OGG files. |
| 34 | + |
| 35 | +Once you have that copy the code and go to the page in Webflow where you want the background video element to live and add a `Embed` block to your canvas. Now paste in the code. |
| 36 | + |
| 37 | +### The JavaScript |
| 38 | + |
| 39 | +Now you'll want to download the library and upload it somewhere and include it in the `before` body section of your page. You can [get a CDN link from the GitHub repo](https://github.com/verlok/vanilla-lazyload#-getting-started---script). |
| 40 | + |
| 41 | +When adding to your project, you can use async: |
| 42 | + |
| 43 | +```html |
| 44 | +<script |
| 45 | + async |
| 46 | + src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js" |
| 47 | +></script> |
| 48 | +``` |
| 49 | + |
| 50 | +Above that, you'll want to add a script and configure vanilla-lazyload to your liking, but in our example we used: |
| 51 | + |
| 52 | +```js |
| 53 | +window.lazyLoadOptions = { |
| 54 | + elements_selector: ".lazy", |
| 55 | + threshold: 1, |
| 56 | +}; |
| 57 | +``` |
| 58 | + |
| 59 | +Here's a link to see the full list of options: |
| 60 | + |
| 61 | +https://github.com/verlok/vanilla-lazyload#options |
| 62 | + |
| 63 | +Now, publish your page and watch your site performance take off!! 🚀 |
0 commit comments