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.

The simple iframe embedding 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:

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

IFrame API:

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 in the simple embedding guide.

<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:

<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.

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.

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

Video quality (VideoQuality)

The player uses this quality type:

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 .

Use the IFrame API

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

await player.setVideoQuality(720)

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

See Control the player for method details.

Limit the maximum ABR quality

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

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

Next steps

• Simple iframe embedding — view all URL parameters
• Create a player — configure behavior.preload, autoPlay, and other options
• Troubleshooting — resolve autoplay and browser policy issues