Простое встраивание через <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;"
></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 Показывать ли элементы управления плеером.
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;"
  ></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;"
></iframe>

См. так же