Простое встраивание через <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

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

Параметр Поддерживаемые значения Описание
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

Для параметров, которые принимают значения 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>