RUTUBE Embed Kit

Прямой iframe

Готовый HTML-блок без JavaScript. Все параметры (VIDEO_ID, dist, anc, tp) указываются в URL каждого iframe.

<iframe width="720" height="405"
  src="https://rutube.ru/play/embed/479c58a745de50383649a3a0c7c7f0c5/?dist=shkulevmedia_2&anc=woman.ru&tp=web&autoplay=true&autostartmute=true"
  style="border: none;"
  allow="clipboard-write; autoplay"
  allowFullScreen></iframe>Копировать

Живой пример

Параметры: VIDEO_ID - 32-hex ID из URL RUTUBE Studio. dist - партнёрский код от менеджера RUTUBE. anc - домен сайта. tp - устройство (web / app / tv).

Готовый инструмент для сборки iframe-кода: Склейщик эмбед-кода.html ⬇ (скачайте и откройте локально в браузере).

<iframe ... src="https://rutube.ru/play/embed/VIDEO_ID/?dist=...&anc=...&tp=web&referer=embed.noads&autoplay=true&autostartmute=true"></iframe>

CMS inline (Sticky-обёртка с inline-скриптом) или по URL

Для конструкторов сайтов и WYSIWYG-редакторов где нельзя подключить внешний JS-файл (Tilda, шаблонные CMS без доступа к layout). Содержимое Sticky-wrapper'а встраивается в HTML страницы как один <script> блок, iframe оборачивается в обёртку через CSS-классы video-sticky-wrapper.

Один раз на страницу:

<script data-wrapper-class="video-sticky">
!function(){const t=document.currentScript,e=t?.getAttribute("data-wrapper-class")?.trim();...
   /* минифицированный код rutube-video-wrapper.min.js целиком (~5 KB) */
}();
</script>

На каждое видео:

<div class="video-sticky-wrapper
            video-sticky-align-bottom-right
            video-sticky-behaviour-maybe">
  <iframe width="720" height="405"
    src="https://rutube.ru/play/embed/VIDEO_ID/?dist=…&anc=…&tp=web&autoplay=true&autostartmute=true"
    style="border: none;" allow="clipboard-write; autoplay" allowFullScreen></iframe>
</div>

Готовый код собирает склейщик эмбед-кода (скачайте и откройте локально) - в настройке площадки выберите «Способ подключения скрипта Sticky-обёртки: Inline или URL».

JS-сниппет

Подключаете один JS-файл и в шаблоне статьи указываете <div data-rutube="...">. Скрипт находит контейнеры и заменяет их на <iframe> с подставленными партнёрскими параметрами.

<!-- В layout/footer сайта (один раз): -->
<script>window.RUTUBE_DIST = 'shkulevmedia_2';</script>
<script src="https://egor-yudin.ru/kit/rutube-embed-builder.min.js" defer></script>

<!-- В шаблоне статьи (один раз): -->
<div data-rutube="{{ article.video_url }}"></div>

<!-- {{ article.video_url }} - значение поля из CMS:
     - URL из RUTUBE Studio: https://rutube.ru/video/479c.../
     - или 32-hex ID: 479c58a745de50383649a3a0c7c7f0c5
     Скрипт распарсит и то, и другое. -->Копировать

Живой пример

Как это работает

В layout / footer сайта (разработчик однократно):

<script>window.RUTUBE_DIST = 'shkulevmedia_2';</script>
<script src="https://egor-yudin.ru/kit/rutube-embed.js" defer></script>

Скрипт находит на странице все элементы с атрибутом data-rutube и заменяет их на <iframe> RUTUBE-плеера. dist / anc / tp подставляются автоматически из window.RUTUBE_DIST, window.location.hostname и значения "web" по умолчанию.

В шаблоне статьи (разработчик однократно):

<div data-rutube="{{ article.video_url }}"></div>

В шаблоне Twig / Blade / Jinja / React переменная {{article.video_url}} подставится значением из CMS-поля. Редактор HTML не пишет.

<div data-rutube="{{article.video_url}}" data-no-ads="true"></div>

<iframe src="https://rutube.ru/play/embed/.../?dist=...&anc=...&tp=web&referer=embed.noads&autoplay=true..."></iframe>

<div data-rutube="..."
     data-sticky="true"
     data-sticky-position="bottom-right"></div>

<script src="/static/rutube-embed-builder.min.js" defer></script>

data-rutube="URL_или_32hex_ID"      ссылка из RUTUBE Studio или 32-hex ID
data-width / data-height            размеры iframe (default: 720x405)
data-autoplay="false"               отключить автозапуск
data-mute="false"                   стартовать со звуком
data-no-ads="true"                  brand safety: referer=embed.noads
data-sticky="true"                  sticky-плеер при скролле
data-sticky-position="..."          bottom-right | bottom-left | top-right | top-left
data-sticky-width / -height         размер sticky-плеера (default: 320x180)
data-dist / data-anc                переопределить глобальные RUTUBE_DIST / ANC

Загрузка через RUTUBE API

Реализация по официальной документации RUTUBE API. CMS загружает видеофайл на RUTUBE, получает callback с video_id и сохраняет связку article_id ↔ video_id в своей БД.

Pipeline

Запрос на загрузку

POST https://rutube.ru/api/video/
Headers: Authorization: Token <RUTUBE_TOKEN>
Body (form-urlencoded):
  url=https://woman.ru/uploads/video.mp4
  callback_url=https://woman.ru/rutube/callback
  errback_url=https://woman.ru/rutube/error
  title=Заголовок видео
  extra={"article_id":"12345"}

Ответ:
{"video_id": "479c58a745de50383649a3a0c7c7f0c5"}Копировать

Callback от RUTUBE после конвертации

POST https://woman.ru/rutube/callback
{
  "id": "479c58a745de50383649a3a0c7c7f0c5",
  "title": "...",
  "html": "<iframe ...>",
  "embed_url": "...",
  "session": {"extra": {"article_id":"12345"}}
}

Сравнение

Технические характеристики всех четырёх способов.

Документация и материалы

Официальные документы RUTUBE и файлы Embed Kit.

Установка эмбед-плеера кодом

Официальная инструкция RUTUBE: rutube.ru/info/embed/

Необходимо разметить эмбеды уникальными параметрами площадки:

dist=ПАРТНЕР&anc=площадка&tp=устройство, где:

• dist - наименование партнёра, например dist=shkulevmedia_2
• anc - домен, например anc=woman.ru
• tp - устройство (варианты web / app / tv)

Пример кода:

<iframe width="720" height="405" src="https://rutube.ru/play/embed/479c58a745de50383649a3a0c7c7f0c5/?dist=shkulevmedia_2&anc=woman.ru&autostartmute=true&autoplay=true" style="border: none;" allow="clipboard-write; autoplay" allowFullScreen></iframe>Копировать

Документы

Embed Kit - инструменты