# Встраиваемые виджеты Рядом со встроенным плеером можно разместить два виджета — **список плейлиста** и **список глав** текущего видео. Раньше такой список был только на публичной странице Kinescope; теперь он встраивается на ваш сайт отдельным блоком. | Виджет | Для чего | Где доступен | | :--- | :--- | :--- | | **Плейлист** | Список роликов с превью, названием и длительностью. Клик — переключение ролика в плеере | Плейлист из двух и более роликов | | **Главы** | Список глав с таймкодами. Клик — переход к главе | Одиночное видео, у которого есть главы | Виджеты не пересекаются: у плейлиста доступен только виджет плейлиста, у видео — только виджет глав. > **Внимание:** Виджет работает **только вместе с плеером Kinescope на той же странице**. Отдельно, без плеера, он ничего не показывает. ## Где взять код 1. Откройте настройки видео или плейлиста в панели управления и нажмите **«Встроить»**. 2. Перейдите на вкладку **«Главы»** (у видео) или **«Плейлист»** (у плейлиста). 3. Выберите **тему виджета**: `Авто`, `Светлая` или `Тёмная`. 4. Выберите тип кода: **адаптивный** — виджет занимает блок, в который вставлен, или **фиксированный** — с шириной и высотой в пикселях (по умолчанию 400 × 600). 5. Скопируйте **скрипт** — он вставляется на страницу один раз, независимо от числа виджетов. 6. Нажмите **«Скопировать код»** — в буфер попадёт блок виджета. ![Вкладка «Главы» в окне «Встроить» у видео: тема, скрипт и код виджета](images/vp-vidzhety-kod-glavy-01.webp " =1920x1080") У плейлиста то же окно открывается на вкладке «Плейлист»: ![Вкладка «Плейлист» в окне «Встроить» у плейлиста](images/vp-vidzhety-kod-pleylist-01.webp " =1920x1080") Вкладки появляются не всегда: * **«Главы»** — только если у видео включены главы. Как их добавить — в статье [«Взаимодействие с файлами: субтитры, главы и др.»](https://docs.kinescope.ru/katalog-i-upravlenie-video/vzaimodeystvie-s-faylami-subtitry-glavy-i-dr/). * **«Плейлист»** — только если в плейлисте больше одного ролика. ## Код вставки Виджет состоит из двух частей: скрипт-загрузчик и блок-контейнер. **Скрипт** — один раз на страницу, обычно перед закрывающим ``: ```html ``` **Контейнер** — в том месте, где должен появиться виджет: ```html ``` `PLAYLIST_ID` и `VIDEO_ID` — идентификаторы плейлиста и видео из панели управления. Подставлять их вручную не нужно: в скопированном коде они уже есть. Загрузчик подставляет в контейнер iframe с виджетом и сам связывает его с плеером на странице. ### Размер виджета Виджет занимает блок, в который вставлен: ширина — по ширине блока, высота — по его высоте. Поэтому высоту задавайте в своей вёрстке — через CSS блока или атрибутом `data-height`. Чтобы список встал ровно в высоту плеера, поставьте плеер и виджет в одну строку сетки и укажите виджету `data-height="100%"`. ### Пример: плеер и виджет глав рядом ```html

Урок 1

``` Так виджет глав выглядит на странице рядом с плеером: ![Плеер и виджет глав рядом на странице сайта](images/vp-vidzhety-glavy-01.webp " =1920x1080") Виджет плейлиста встраивается так же — с плеером плейлиста (`https://kinescope.io/embed/pl/PLAYLIST_ID`) и контейнером `kinescope-widget-playlist`. Подробнее о плейлистах в плеере — в статье [«Плейлисты»](https://docs.kinescope.ru/dokumentaciya-pleera/pleylisty/). ![Плеер плейлиста и виджет плейлиста рядом на странице сайта](images/vp-vidzhety-pleylist-01.webp " =1920x1080") ## Параметры Все параметры задаются атрибутами контейнера. В панели управления они подставляются автоматически — по выбранной теме и типу кода. | Атрибут | Значения | Описание | | :--- | :--- | :--- | | `data-id` | ID видео или плейлиста | Обязательный. Что показывать в виджете | | `data-theme` | `light`, `dark` | Тема виджета. Для темы `Авто` атрибут не добавляется — виджет следует системной теме браузера зрителя | | `data-width` | `100%`, размер в px | Ширина виджета. Без атрибута — по ширине блока-контейнера | | `data-height` | `100%`, размер в px | Высота виджета. Без атрибута — по высоте блока-контейнера | Тема виджета не связана с темой плеера — это независимая настройка. Интерфейс виджета (заголовки, подсказки) отображается на языке браузера зрителя. > **Информация:** Чтобы изменить тему или размер уже встроенного виджета, скопируйте код заново с новыми настройками и замените блок на своём сайте. Автоматически параметры не обновляются. ## Синхронизация с плеером Виджет находит плеер Kinescope на странице сам — дополнительный код не нужен. Работают три схемы: два iframe рядом, плеер через [IFrame API](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/iframe-api/) плюс виджет и обычный embed-плеер плюс виджет. Что происходит дальше: * переключение ролика в плеере подсвечивает активную строку в виджете плейлиста; * воспроизведение подсвечивает текущую главу в виджете глав; * клик по ролику переключает плеер, клик по главе перематывает видео к её началу; * при пересоздании плеера виджет переподключается автоматически. Если содержимое изменилось — добавили ролик в плейлист или главу в видео, — виджет на сайте подхватит это сам. Перевставлять код не нужно. ## На мобильных На узких экранах виджет сворачивается: список открывается по тапу и выезжает снизу поверх страницы. Плеер при этом остаётся на месте. Отдельного кода для мобильной версии не требуется. ## Пустые состояния | Что видит зритель | Когда | | :--- | :--- | | **«Главы отсутствуют»** | Главы у видео удалили или скрыли после того, как виджет встроили | | **«Нет данных»** | В плейлисте остался один ролик | | **«Встраивание недоступно»** | Видео или плейлист удалены либо недоступны для встраивания | Виджет при этом остаётся на странице и не ломает вёрстку. ## Ограничения * Виджет не работает без плеера Kinescope на той же странице. * Редактировать плейлист или главы из виджета нельзя — это делается в панели управления. * Оформление, кроме темы и размера, не настраивается: шрифты, цвета и превью изменить нельзя. * Список внутри виджета прокручивается: если блок ниже, чем список, видна часть роликов или глав — активная строка подсвечена. * У плейлиста нет виджета глав, у одиночного видео — виджета плейлиста. ## Что дальше? 1. **[Встраивание](https://docs.kinescope.ru/videopleer-nastrojka-i-vstraivanie/vstraivanie/)** — код вставки плеера, размеры и параметры 2. **[Плейлисты](https://docs.kinescope.ru/katalog-i-upravlenie-video/pleylisty/)** — как собрать плейлист в каталоге 3. **[Взаимодействие с файлами: субтитры, главы и др.](https://docs.kinescope.ru/katalog-i-upravlenie-video/vzaimodeystvie-s-faylami-subtitry-glavy-i-dr/)** — как добавить главы к видео 4. **[Кастомизация плеера](https://docs.kinescope.ru/videopleer-nastrojka-i-vstraivanie/kastomizatsiya-pleera/)** — внешний вид плеера под ваш бренд > **Информация:** **Для разработчиков:** как задать плейлист из кода и управлять плеером через IFrame API — в [документации плеера](https://docs.kinescope.ru/dokumentaciya-pleera/pleylisty/). Остались вопросы? Напишите в [чат поддержки](https://t.me/kinescope_bot) — специалисты помогут!