Видео в блоге: эмбед по ссылке и загрузка файлов

Видео в блоге: эмбед по ссылке и загрузка файлов

В bl0g.ru появилось два новых способа работать с видео: эмбед плеера по ссылке на популярный видеосервис и загрузка собственных файлов прямо из редактора. Разбираемся, что поддерживается, как выглядит в разметке и что получится в итоге — все примеры в статье живые.

Эмбед по ссылке: фенс video

Если ссылка ведёт на страницу видео на одном из поддерживаемых сервисов, достаточно обернуть её в блок с языком video:

```video
https://www.youtube.com/watch?v=aqz-KE-bpKQ
```

При рендере из адреса вырезается идентификатор ролика и собирается ленивый iframe — сторонний плеер подгружается только когда до него долистали. Вот этот пример в действии:

В одном блоке можно перечислить несколько ссылок — по одной на строку; плееры встанут друг под другом. Заодно проверим Vimeo:

```video
https://www.youtube.com/watch?v=aqz-KE-bpKQ
https://vimeo.com/76979871
```

Кто поддерживается

Сервис Какая ссылка подходит
YouTube обычная со watch?v=, youtu.be/…, /shorts/…, /live/…
RuTube rutube.ru/video/<hash>/
VK Видео vkvideo.ru/video-… и vk.com/video-…
Одноклассники ok.ru/video/…
Vimeo vimeo.com/<id>
Dailymotion dailymotion.com/video/… и dai.ly/…
Дзен готовая embed-ссылка вида dzen.ru/embed/<token>

Для Дзена есть нюанс: из обычной страницы просмотра (dzen.ru/watch/…) эмбед не собрать — у платформы нет публичного формата по идентификатору. Откройте под видео «Поделиться» → «Встроить» и скопируйте готовую ссылку вида https://dzen.ru/embed/... — именно она и нужна фенсу.

Свои файлы: нативный <video>

Если ссылка указывает прямо на видеофайл — .mp4, .webm, .mov, .m4v или .ogv — никакой сторонний сервис не подключается: блок превращается в нативный HTML5-плеер браузера. Подходит как полный https-адрес, так и путь относительно сайта, как у файлов, загруженных через редактор:

```video
/media/uploads/videos/lv_0_20251024235220.mp4
```

А вот он же вживую — короткий ролик, загруженный кнопкой из редактора:

Кнопка загрузки в редакторе

Чтобы не копировать пути руками, в тулбаре редактора рядом с кнопкой загрузки картинки появилась кнопка с иконкой киноплёнки. Нажмите, выберите файл (MP4, WebM, MOV или M4V) — он уйдёт на сервер, а в текст на позицию курсора автоматически встанет готовый фенс со ссылкой. Дальше обычный путь: предпросмотр и публикация.

Размер лимитируется настройкой сайта video_max_size, по умолчанию — 200 МБ; загруженные файлы живут по постоянному адресу внутри /media/uploads/videos/.

Если ссылка не распознана

Фенс не молчит при ошибке: нераспознанный адрес превратится в аккуратную плашку с пояснением, а остальная статья даже не заметит проблемы. Например, если подсунуть блоку обычную веб-страницу вместо видео:

```video
https://example.com/some/page
```

Не удалось распознать видео: https://example.com/some/page

Неизвестный сервис. Для файлов используйте прямую https-ссылку или путь к загруженному файлу (/media/…) на .mp4/.webm/.mov/.m4v/.ogv.

И важное следствие дизайна: голые ссылки в абзацах никогда не превращаются в плееры сами по себе. Видео появляется только там, где автор явно попросил — фенсом или через кнопку.

Комментарии

Пока нет комментариев.

Войдите, чтобы комментировать.