# Optimization


If a page has many videos or a player sits below the fold, defer loading and limit quality. The page loads faster and uses less traffic.

| Goal | Use |
| :--- | :--- |
| Do not download video before Play | `preload=0` or `behavior.preload: false` |
| Do not load the iframe before scrolling | `loading="lazy"` |
| Show a custom poster over the player | `no_poster=1` |
| Start playback when the player enters the viewport | `autoPlay: 'viewable'` |
| Play only while the pointer is over the player | `autoPlay: 'hover'` |
| Set or limit video quality | `quality`, `VideoQuality`, or `maxAbrQuality` |

The [simple iframe embedding](https://docs.kinescope.com/player-docs/embedding/simple-iframe-embed/) guide also describes the basic URL parameters.

## Disable video preloading

The player and poster load first. Video data starts loading only after playback begins.

Simple embedding:

```html
<iframe src="https://kinescope.io/embed/VIDEO_ID?preload=0" ...></iframe>
```

IFrame API:

```js
playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { preload: false },
})
```

## Lazy-load the iframe

The browser can defer loading while the `<iframe>` is outside the viewport. See [Lazy loading](https://docs.kinescope.com/player-docs/embedding/simple-iframe-embed/#lazy-loading) in the simple embedding guide.

```html
<iframe loading="lazy" src="https://kinescope.io/embed/VIDEO_ID" ...></iframe>
```

## Disable the player poster

If you display your own poster, such as an `<img>` over the player, disable the built-in poster. This prevents the image from loading twice:

```html
<iframe src="https://kinescope.io/embed/VIDEO_ID?no_poster=1&preload=0" ...></iframe>
```

## Start playback when visible

The player starts automatically when it enters the viewport. This is useful for videos below the fold.

```js
playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { autoPlay: 'viewable' },
})
```

## Start playback on hover

The video plays while the pointer is over the player and pauses when it leaves. This behavior stops after the first click on the player.

```js
playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { autoPlay: 'hover' },
})
```

## Video quality (VideoQuality) {#video-quality}

The player uses this quality type:

```ts
type VideoQuality = 'auto' | number
```

- `'auto'` selects adaptive bitrate (ABR) quality for the network and device
- `number` sets the frame height in pixels, usually `360`, `480`, `720`, `1080`, `1440`, or `2160`

### Use a URL parameter

```
https://kinescope.io/embed/VIDEO_ID?quality=720
```

See the `quality` parameter in [Simple iframe embedding](https://docs.kinescope.com/player-docs/embedding/simple-iframe-embed/).

### Use the IFrame API

```js
const qualities = await player.getVideoQualityList()
// ['auto', 360, 480, 720, 1080]

await player.setVideoQuality(720)

const current = await player.getVideoQuality()
// 720
```

See [Control the player](https://docs.kinescope.com/player-docs/embedding/iframe-api-control-player/) for method details.

## Limit the maximum ABR quality

By default, ABR selects the best available quality. Set a maximum value to reduce traffic:

```js
playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { maxAbrQuality: 720 },
})
```

## Next steps

- [Simple iframe embedding](https://docs.kinescope.com/player-docs/embedding/simple-iframe-embed/) — view all URL parameters
- [Create a player](https://docs.kinescope.com/player-docs/embedding/iframe-api-create-player/) — configure `behavior.preload`, `autoPlay`, and other options
- [Troubleshooting](https://docs.kinescope.com/player-docs/troubleshooting/) — resolve autoplay and browser policy issues