# RUTUBE Embed Kit

JS-сниппет для встраивания видео RUTUBE на сайт с партнёрской разметкой `dist/anc/tp`. Без внешних API-зависимостей.

## Быстрый старт

```html
<!-- 1. Один раз на странице (или в layout) укажите свой партнёрский код -->
<script>window.RUTUBE_DIST = 'shkulevmedia_2';</script>

<!-- 2. В нужном месте контента вставьте контейнер с ID видео -->
<div data-rutube-video-id="479c58a745de50383649a3a0c7c7f0c5"></div>

<!-- 3. Один раз подключите наш скрипт (можно в footer перед </body>) -->
<script src="https://egor-yudin.ru/kit/rutube-embed.js" defer></script>
```

Всё. Скрипт сам найдёт все `<div data-rutube-video-id="...">` на странице и заменит их на iframe с правильными параметрами.

## Что подставляется в iframe автоматически

| Параметр | Откуда |
|---|---|
| `dist` | `window.RUTUBE_DIST` - ваш партнёрский код от менеджера RUTUBE |
| `anc` | `window.location.hostname` - текущий домен страницы |
| `tp` | `'web'` (можно переопределить через `data-tp="app"`) |
| `autoplay=true` | по умолчанию (можно отключить через `data-autoplay="false"`) |
| `autostartmute=true` | по умолчанию (можно отключить через `data-mute="false"`) |

⚠️ Без `dist/anc/tp` статистика просмотров **не засчитывается**. Скрипт всегда их подставляет.

## Дополнительные атрибуты

```html
<div
  data-rutube-video-id="..."
  data-width="1280"
  data-height="720"
  data-autoplay="false"
  data-mute="false"
  data-no-ads="true"
></div>
```

- `data-width` / `data-height` - размеры iframe (по умолчанию 720×405)
- `data-autoplay="false"` - отключить автозапуск
- `data-mute="false"` - стартовать со звуком (если разрешено браузером)
- `data-no-ads="true"` - **brand safety: отключение рекламы на чувствительном контенте** (медицина, политика, трагедии). Добавляет параметр `referer=embed.noads` в URL плеера.

## Программное использование (SPA / динамика)

Если страница рендерится после загрузки скрипта (React/Vue/Next.js), вызовите `rutubeEmbed` напрямую:

```javascript
useEffect(() => {
  window.rutubeEmbed(videoId, ref.current);
}, [videoId]);
```

Или после добавления новых div'ов в DOM:

```javascript
window.RutubeEmbedKit.mountAll();
```

## Альтернативы

### Хостинг скрипта на своём CDN

Если не хотите зависеть от нашего домена - скачайте `rutube-embed.js` (один файл, 1.5KB) и положите к себе:

```html
<script src="/static/rutube-embed.js" defer></script>
```

### Прямой iframe без скрипта (для CMS, где нельзя добавить JS)

```html
<iframe width="720" height="405"
  src="https://rutube.ru/play/embed/{VIDEO_ID}/?dist=shkulevmedia_2&anc=woman.ru&tp=web&autoplay=true&autostartmute=true"
  style="border: none;" allow="clipboard-write; autoplay" allowFullScreen></iframe>
```

Замените `{VIDEO_ID}`, `dist`, `anc` на свои.

### API workflow - загрузка через RUTUBE API

Реализация по [официальной документации RUTUBE API](examples/upload/README.md): CMS загружает файл в RUTUBE, RUTUBE присылает callback с `video_id`, в шаблоне `<div data-rutube="...">`. Готовые примеры (Python / PHP / Node.js): [`examples/upload/`](examples/upload/).

## Примеры для популярных CMS

| CMS | Пример |
|---|---|
| Next.js (любая headless CMS) | [`examples/nextjs/`](examples/nextjs/) |
| Strapi | [`examples/strapi/`](examples/strapi/) |
| WordPress | [`examples/wordpress/`](examples/wordpress/) |
| 1С-Битрикс | [`examples/bitrix/`](examples/bitrix/) |
| Plain HTML / лендинг | [`examples/plain-html/`](examples/plain-html/) |
| **API workflow** | [`examples/upload/`](examples/upload/) |

## Что нужно от RUTUBE на старте

1. **Партнёрский `dist` код** - выдаёт менеджер RUTUBE при подключении к партнёрской программе (например, `shkulevmedia_2`)
2. **ID видео** - берётся из URL ролика в Studio: `https://studio.rutube.ru/video/{ID}/` (32 hex-символа)
3. (опционально) **Параметр `referer=embed.noads`** - для отключения рекламы (brand safety)

## Поддержка

- Issues / вопросы: https://github.com/yudinegor/embed
- Live demo: https://egor-yudin.ru/
- Документация RUTUBE: https://rutube.ru/info/embed/