Простое встраивание через <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; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
></iframe>

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

Чтобы указать несколько параметров необходимо между ними вставить символ &, например: https://kinescope.io/embed/123456789?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/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.

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

Пока iframe находится вне зоны видимости, где-то глубоко внизу страницы, можно отложить его загрузку, чтобы сократить нагрузку на страницу и увеличить быстродействие.

Для отложенной загрузки iframe укажите атрибут loading="lazy":


<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%;
  }
</style>
<div class="kin-player-embed-container">
  <iframe
    src="https://kinescope.io/embed/123456789"
    frameborder="0"
    allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
  ></iframe>
</div>

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


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