Skip to content

Commit

Permalink
Readme tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
mmikkel committed Jul 1, 2023
1 parent f04e70f commit eb36da6
Showing 1 changed file with 9 additions and 15 deletions.
24 changes: 9 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -224,19 +224,17 @@ window.customElements.whenDefined('mux-video')

#### Lazy-loading the `<mux-video>` web component

The `<mux-video>` 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 `<mux-video>` 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 `<mux-video>` element actually enters the viewport.

##### Lazy-loading `<mux-video>` everywhere all the time
To automatically lazy-load the `<mux-video>` web component everywhere, simply set the `lazyloadMuxVideo` config setting to `true`:

To automatically lazy-load the `<mux-video>` web component everywhere, simply set the `lazyloadMuxVideo` config setting to `true`. This will make MuxMate create an `IntersectionObserver` instance, that loads the `<mux-video>` library as soon as a Mux video component enters the viewport (instead of loading it on pageload).

##### Lazy-loading per `<mux-video>` instance

Alternatively, you can tell MuxMate to lazy load the `<mux-video>` web component by passing `lazyload: true` to the `getMuxVideo()` method:
```php
<?php

```twig
{{ asset.getMuxVideo({ lazyload: true }) }}
```
return [
'lazyloadMuxVideo' => true,
];
```

##### Implementing your own lazy loading strategy

Expand All @@ -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');
Expand Down Expand Up @@ -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.

Expand Down

0 comments on commit eb36da6

Please sign in to comment.