# Simple iframe embed


The easiest way to add the player is to insert an `<iframe>` with a video or playlist URL. You can copy the code from the Kinescope dashboard or create it manually.

## Basic code

```html
<iframe
  src="https://kinescope.io/embed/VIDEO_ID"
  width="640"
  height="360"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
  style="border: none;"
></iframe>
```

Replace `VIDEO_ID` with the ID of your video or playlist.

> **Внимание:**

The `allow` attribute is required. Without it, autoplay, fullscreen, Picture-in-Picture, and DRM may not work.



> **Внимание:**

Avoid using the `sandbox` attribute. If you need it, specify:

`allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox allow-presentation`



## URL parameters

Add parameters to the end of the URL to configure player behavior. Start them with `?` and separate multiple values with `&`:

`https://kinescope.io/embed/VIDEO_ID?autoplay=1&loop=1`

```html
<iframe
  src="https://kinescope.io/embed/VIDEO_ID?parameter=value"
  width="640"
  height="360"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
  style="border: none;"
></iframe>
```

### Supported parameters

<table class="table-params">
<thead>
<tr>
<th>Parameter</th>
<th>Values</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong><code>autofocus</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Move focus to the player.</td>
</tr>
<tr>
<td><strong><code>autoplay</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Start the video automatically after the player loads. If playback with sound fails, the player tries to start with sound muted.</td>
</tr>
<tr>
<td><strong><code>autopause</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Pause when another player on the page starts playing.</td>
</tr>
<tr>
<td><strong><code>muted</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Mute the player.</td>
</tr>
<tr>
<td><strong><code>loop</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Loop the video.</td>
</tr>
<tr>
<td><strong><code>playsinline</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Play video on mobile devices without automatically entering fullscreen mode.</td>
</tr>
<tr>
<td><strong><code>preload</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Preload the video. <code>false</code> loads only the poster. <code>true</code> loads the required data in advance.</td>
</tr>
<tr>
<td><strong><code>background</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Hide all controls and set <code>autoplay</code>, <code>muted</code>, and <code>loop</code> to <code>true</code>.</td>
</tr>
<tr>
<td><strong><code>t</code></strong></td>
<td><code>number</code></td>
<td>Time in seconds where video playback starts.</td>
</tr>
<tr>
<td><strong><code>seek</code></strong></td>
<td><code>number</code></td>
<td>Time in seconds where playback starts. This trims the beginning of the manifest.</td>
</tr>
<tr>
<td><strong><code>duration</code></strong></td>
<td><code>number</code></td>
<td>Clip duration in seconds. Use it with <code>seek</code> to show only part of a video.</td>
</tr>
<tr>
<td><strong><code>quality</code></strong></td>
<td><a href="/player-docs/optimization/#video-quality"><code>VideoQuality</code></a></td>
<td>Video quality: <code>auto</code> or height in pixels, such as <code>720</code> or <code>1080</code>. See <a href="/player-docs/optimization/#video-quality">Optimization</a>.</td>
</tr>
<tr>
<td><strong><code>audiotrack</code></strong></td>
<td><code>string</code></td>
<td>Enable the audio track for the specified language. <code>@experimental</code></td>
</tr>
<tr>
<td><strong><code>texttrack</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code> / <code>string</code></td>
<td>Enable subtitles. <code>true</code> selects the browser language, then the player language, then the first track. <code>string</code> selects the track for the specified language.</td>
</tr>
<tr>
<td><strong><code>transparent</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Use a transparent player background.</td>
</tr>
<tr>
<td><strong><code>title</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Show the title and subtitle.</td>
</tr>
<tr>
<td><strong><code>controls</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Show player controls.</td>
</tr>
<tr>
<td><strong><code>no_poster</code></strong></td>
<td><code>1</code> / <code>0</code></td>
<td>Hide the poster.</td>
</tr>
<tr>
<td><strong><code>keyboard</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Control the player with the keyboard.</td>
</tr>
<tr>
<td><strong><code>speedbtn</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Show the playback speed button.</td>
</tr>
<tr>
<td><strong><code>notifications</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Show notifications in the player for network problems, errors, Chromecast, and other events. <code>@experimental</code></td>
</tr>
<tr>
<td><strong><code>watermark</code></strong></td>
<td><code>string</code></td>
<td>Watermark text. Enable this feature in the dashboard. Otherwise, the player ignores the parameter.</td>
</tr>
<tr>
<td><strong><code>dnt</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Disable user activity tracking and metrics.</td>
</tr>
<tr>
<td><strong><code>drmauthtoken</code></strong></td>
<td><code>string</code></td>
<td>Custom authorization token for license requests. See <a href="/content-protection/drm-encryption/">DRM encryption</a>.</td>
</tr>
<tr>
<td><strong><code>adtagurl</code></strong></td>
<td><code>string</code></td>
<td>Advertising tag URL. See <a href="/player-docs/advertising/">Advertising</a>.</td>
</tr>
<tr>
<td><strong><code>externalid</code></strong></td>
<td><code>string</code></td>
<td>Custom identifier sent with metrics.</td>
</tr>
</tbody>
</table>

> **Информация:**

You can use `1` and `0` instead of `true` and `false`. For example, `?autoplay=true` and `?autoplay=1` are equivalent. A parameter without a value, such as `?autoplay`, is treated as `true`.



> **Внимание:**

The `seek` and `duration` parameters do not work with DRM-protected videos. You can use them with video URLs and HLS manifests.



This example plays a 30-second clip starting at 60 seconds:

```html
<iframe
  src="https://kinescope.io/embed/VIDEO_ID?seek=60&duration=30"
  width="640"
  height="360"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
  style="border: none;"
></iframe>
```

## Lazy loading

When the `<iframe>` is outside the viewport, such as near the bottom of the page, you can delay loading it. This helps the page open faster:

```html
<iframe loading="lazy" ...></iframe>
```

See [Optimization](https://docs.kinescope.com/player-docs/optimization/) for details.

## Embed examples

### Responsive player size {#responsive_example}

The player adapts to the container width. Place the code in your container and adjust the styles if needed.

```html
<style>
  .kin-player-embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .kin-player-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
</style>
<div class="kin-player-embed-container">
  <iframe
    src="https://kinescope.io/embed/VIDEO_ID"
    allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
  ></iframe>
</div>
```

### Fixed video size {#fixed_example}

```html
<iframe
  src="https://kinescope.io/embed/VIDEO_ID"
  width="640"
  height="360"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
  style="border: none;"
></iframe>
```

## Next steps

- [Optimization](https://docs.kinescope.com/player-docs/optimization/) — viewport autoplay and quality limits
- [IFrame API](https://docs.kinescope.com/player-docs/embedding/iframe-api/) — control the player from JavaScript
- [Embedding from the dashboard](https://docs.kinescope.com/video-player/embedding/) — UI-generated code, LLM-friendly embeds, and templates (`player_id`)