diff --git a/README.md b/README.md index dc041b5..2780d6c 100644 --- a/README.md +++ b/README.md @@ -224,19 +224,17 @@ window.customElements.whenDefined('mux-video') #### Lazy-loading the `` web component -The `` web component is a little bit beefy (~150K gzipped), so it can make sense to lazy-load it. There are a few ways to do that: +The `` web component is a little bit beefy (~150K gzipped), so it can make sense to lazy-load it – i.e. not load it before a `` element actually enters the viewport. -##### Lazy-loading `` everywhere all the time +To automatically lazy-load the `` web component everywhere, simply set the `lazyloadMuxVideo` config setting to `true`: -To automatically lazy-load the `` web component everywhere, simply set the `lazyloadMuxVideo` config setting to `true`. This will make MuxMate create an `IntersectionObserver` instance, that loads the `` library as soon as a Mux video component enters the viewport (instead of loading it on pageload). - -##### Lazy-loading per `` instance - -Alternatively, you can tell MuxMate to lazy load the `` web component by passing `lazyload: true` to the `getMuxVideo()` method: +```php + true, +]; +``` ##### Implementing your own lazy loading strategy @@ -250,7 +248,7 @@ return [ ]; ``` -At that point, you're free to load the web component yourself, in whatever lazy fashion you fancy. For example: +At that point, you're free to load the web component yourself in whatever lazy fashion you fancy. For example: ```js const video = document.getElementById('video'); @@ -359,10 +357,6 @@ The `params` array can contain the following settings: inline: true # Automatically sets all the required attributes for videos that should play inline. ``` -```twig -lazyload: true # Creates an IntersectionObserver that loads the mux-video JS library as soon as this component enters the viewport -``` - ### `getMuxStreamUrl()` [string|null] If the asset has a Mux playback ID, returns the HLS stream URL.