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

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

<iframe
  src="https://kinescope.io/embed/123456789?параметр=значение"
  width="640"
  height="360"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
></iframe>

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

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

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

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

Параметр	Поддерживаемые значения	Описание
`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` - предварительно загружаются необходимые данные видео.
`texttrack`	`true`/`false` или `1`/`0` или `string`	Включать ли субтитры при загрузке видео. - `true` - включать дорожку по умолчанию или на языке плеера. - `string` - включать дорожку с указанным языком.
`dnt`	`true`/`false` или `1`/`0`	Отключить отслеживание действий пользователя, отправку метрик и т.п.
`background`	`true`/`false` или `1`/`0`	Отключает все элементы управления, устанавливает `autoplay`, `muted`, `loop` в `true`
`t`	`number`	Время с которого начинается проигрывание видео (сек).
`quality`	`VideoQuality`	Качество видео.
`transparent`	`true`/`false` или `1`/`0`	Прозрачный фон плеера.
`speedbtn`	`true`/`false` или `1`/`0`	Показывать ли кнопку выбора скорости воспроизведения.
`title`	`true`/`false` или `1`/`0`	Показывать ли заголовок, подзаголовок.
`controls`	`true`/`false` или `1`/`0`	Показывать ли элементы управления плеером.
`keyboard`	`true`/`false` или `1`/`0`	Управление плеером с клавиатуры. `@experimental`
`drmauthtoken`	`string`	Пользовательский токен для авторизации. `@experimental`
`adtagurl`	`string`	Ссылка на тег рекламы. `@experimental`
`watermark`	`string`	Текст водяного знака. `@experimental`

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

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

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

Адаптивный размер плеера (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%;
  }
</style>
<div class="kin-player-embed-container">
  <iframe
    src="https://kinescope.io/embed/123456789"
    frameborder="0"
    allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
  ></iframe>
</div>

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

<iframe
  src="https://kinescope.io/embed/123456789"
  width="640"
  height="360"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
></iframe>