# Простое встраивание через iframe


Самый простой способ добавить плеер — вставить на страницу тег `<iframe>` со ссылкой на видео или плейлист. Код можно скопировать из панели управления Kinescope или собрать вручную.

## Базовый код

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

Замените `VIDEO_ID` на идентификатор видео или плейлиста.

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

Атрибут `allow` обязателен: без него могут не работать автозапуск, полноэкранный режим, Picture-in-Picture и DRM.



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

Атрибут `sandbox` лучше не использовать. Если он всё же нужен, укажите:

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



## Параметры URL

Поведение плеера настраивается параметрами в конце URL. Они начинаются с `?`, несколько значений разделяются `&`:

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

### Поддерживаемые параметры

<table class="table-params">
<thead>
<tr>
<th>Параметр</th>
<th>Значения</th>
<th>Описание</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>Передать фокус плееру.</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>Запускать ли ролик автоматически после загрузки плеера. Если не удалось начать воспроизведение со звуком, плеер попытается начать его с выключенным звуком.</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>Ставить на паузу, если другой плеер на странице начал проигрывание.</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>Выключить звук.</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>Зацикленное видео.</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>Воспроизводить видео на мобильных устройствах, не переходя автоматически в полноэкранный режим.</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>Предзагрузка видео. <code>false</code> — не предзагружать (только постер). <code>true</code> — заранее загрузить необходимые данные.</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>Отключает все элементы управления, устанавливает <code>autoplay</code>, <code>muted</code>, <code>loop</code> в <code>true</code>.</td>
</tr>
<tr>
<td><strong><code>t</code></strong></td>
<td><code>number</code></td>
<td>Время, с которого начинается проигрывание видео (в секундах).</td>
</tr>
<tr>
<td><strong><code>seek</code></strong></td>
<td><code>number</code></td>
<td>Время в секундах, с которого начинается воспроизведение (обрезает начало манифеста).</td>
</tr>
<tr>
<td><strong><code>duration</code></strong></td>
<td><code>number</code></td>
<td>Продолжительность фрагмента в секундах. Вместе с <code>seek</code> позволяет показать только часть видео.</td>
</tr>
<tr>
<td><strong><code>quality</code></strong></td>
<td><a href="/dokumentaciya-pleera/optimizaciya/#video-quality"><code>VideoQuality</code></a></td>
<td>Качество видео: <code>auto</code> или высота в пикселях (<code>720</code>, <code>1080</code>…). Подробнее — в <a href="/dokumentaciya-pleera/optimizaciya/#video-quality">Оптимизации</a>.</td>
</tr>
<tr>
<td><strong><code>audiotrack</code></strong></td>
<td><code>string</code></td>
<td>Включить аудиодорожку с указанным языком. <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>Включить субтитры. <code>true</code> — автовыбор: язык браузера → язык плеера → первая дорожка. <code>string</code> — дорожка с указанным языком.</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>Прозрачный фон плеера.</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>Показывать ли заголовок и подзаголовок.</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>Показывать ли элементы управления плеером.</td>
</tr>
<tr>
<td><strong><code>no_poster</code></strong></td>
<td><code>1</code> / <code>0</code></td>
<td>Не показывать постер.</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>Управление плеером с клавиатуры.</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>Показывать ли кнопку выбора скорости воспроизведения.</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>Показывать ли уведомления в плеере (проблемы с интернетом, ошибки, Chromecast и т.д.). <code>@experimental</code></td>
</tr>
<tr>
<td><strong><code>watermark</code></strong></td>
<td><code>string</code></td>
<td>Текст водяного знака. Функция включается в панели управления; без неё параметр игнорируется.</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>Отключить отслеживание действий пользователя и отправку метрик.</td>
</tr>
<tr>
<td><strong><code>drmauthtoken</code></strong></td>
<td><code>string</code></td>
<td>Пользовательский токен для авторизации при запросе лицензии. См. <a href="/zashita-kontenta/drm-shifrovanie-faylov/">DRM-шифрование</a>.</td>
</tr>
<tr>
<td><strong><code>adtagurl</code></strong></td>
<td><code>string</code></td>
<td>Ссылка на тег рекламы. См. <a href="/dokumentaciya-pleera/reklama/">Реклама</a>.</td>
</tr>
<tr>
<td><strong><code>externalid</code></strong></td>
<td><code>string</code></td>
<td>Пользовательский идентификатор для отправки метрик.</td>
</tr>
</tbody>
</table>

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

Для параметров `true`/`false` можно писать `1`/`0`. Например, `?autoplay=true` и `?autoplay=1` эквивалентны. Если параметр указан без значения (`?autoplay`), это считается `true`.



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

Параметры `seek` и `duration` не работают с видео под DRM. Они применимы к ссылкам на видео и манифестам HLS.



Пример фрагмента — с 60-й секунды, длительностью 30 секунд:

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

## Отложенная загрузка

Пока `<iframe>` находится вне зоны видимости (например, внизу страницы), можно отложить его загрузку — так страница открывается быстрее:

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

Подробнее — в разделе [Оптимизация](https://docs.kinescope.ru/dokumentaciya-pleera/optimizaciya/).

## Примеры встраивания

### Адаптивный размер плеера (responsive) {#responsive_example}

Плеер подстраивается под ширину контейнера. Поместите код в свой контейнер и при необходимости подправьте стили.

```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_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>
```

## Что дальше?

- [Оптимизация](https://docs.kinescope.ru/dokumentaciya-pleera/optimizaciya/) — автозапуск по видимости, ограничение качества
- [IFrame API](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/iframe-api/) — управление плеером из JavaScript
- [Встраивание в панели управления](https://docs.kinescope.ru/videopleer-nastrojka-i-vstraivanie/vstraivanie/) — коды из UI, LLM-friendly, шаблоны (`player_id`)