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

Помимо простого встраивания через <iframe> с указанием URL-адреса видеоролика или плейлиста есть возможность добавить функциональные возможности в плеер, добавив параметры в конец URL-адреса. Параметры URL начинаются с вопросительного знака (?). Например:


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

Атрибут allow позволяет плееру использовать автозапуск, полноэкранный режим, картинку в картинке, проигрывать зашифрованное видео и т.д. Он обязателен для полноценной работы плеера.

Чтобы указать несколько параметров, между ними вставьте символ &, например: https://kinescope.io/embed/VIDEO_ID?autoplay=1&loop=1

Если используется атрибут sandbox (не рекомендуется), то для него необходимо указать значения allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox allow-presentation.

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

Параметр	Поддерживаемые значения	Описание
`autofocus`	`true`/`false` или `1`/`0`	Передать фокус плееру.
`autoplay`	`true`/`false` или `1`/`0`	Запускать ли ролик автоматически после загрузки плеера. Если не удалось начать воспроизведение со звуком, то плеер попытается начать воспроизведение с выключенным звуком.
`autopause`	`true`/`false` или `1`/`0`	Ставить на паузу, если другой плеер на странице начал проигрывание.
`muted`	`true`/`false` или `1`/`0`	Выключить звук.
`loop`	`true`/`false` или `1`/`0`	Зацикленное видео.
`playsinline`	`true`/`false` или `1`/`0`	Воспроизводить видео на мобильных устройствах не переходя автоматически в полноэкранный режим.
`preload`	`true`/`false` или `1`/`0`	Предзагрузка видео. `false` — не осуществлять предзагрузку (только постер, экономия ресурсов). `true` — предварительно загружаются необходимые данные видео.
`background`	`true`/`false` или `1`/`0`	Отключает все элементы управления, устанавливает `autoplay`, `muted`, `loop` в `true`.
`t`	`number`	Время с которого начинается проигрывание видео (в секундах).
`quality`	`VideoQuality`	Выбрать указанное качество видео.
`audiotrack`	`string`	Включить аудиодорожку с указанным языком. `@experimental`
`texttrack`	`true`/`false` или `1`/`0` или `string`	Включить субтитры. `true` — автовыбор: на языке браузера, на языке плеера, первый в списке. `string` — включить дорожку с указанным языком.
`transparent`	`true`/`false` или `1`/`0`	Прозрачный фон плеера.
`title`	`true`/`false` или `1`/`0`	Показывать ли заголовок и подзаголовок.
`controls`	`true`/`false` или `1`/`0`	Показывать ли элементы управления плеером.
`no_poster`	`1`/`0`	Не показывать постер.
`keyboard`	`true`/`false` или `1`/`0`	Управление плеером с клавиатуры.
`speedbtn`	`true`/`false` или `1`/`0`	Показывать ли кнопку выбора скорости воспроизведения.
`notifications`	`true`/`false` или `1`/`0`	Показывать ли уведомления в плеере (проблемы с интернетом, ошибки, хромкаст-подключение и т.д.). `@experimental`
`watermark`	`string`	Текст водяного знака. Функциональность водяного знака включается в панели управления. Без включения функциональности параметр игнорируется.
`dnt`	`true`/`false` или `1`/`0`	Отключить отслеживание действий пользователя, отправку метрик и т.п.
`drmauthtoken`	`string`	Пользовательский токен для авторизации при запросе лицензии.
`adtagurl`	`string`	Ссылка на тег рекламы.
`externalid`	`string`	Какой-либо пользовательский идентификатор. Используется для отправки метрик.

Для параметров, которые принимают значения true/false, эквивалентны значения 1/0. Например: https://kinescope.io/embed/VIDEO_ID?autoplay=true эквивалентно https://kinescope.io/embed/VIDEO_ID?autoplay=1.

Для параметров, которые принимают значение true, отсутствие значения трактуется как true. Например: https://kinescope.io/embed/VIDEO_ID?autoplay эквивалентно https://kinescope.io/embed/VIDEO_ID?autoplay=true.

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

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


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

Подробнее об оптимизации см. раздел Оптимизация.

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

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

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


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

Фиксированный размер видео


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