Как встроить видео с Rutube в модальное окно fancybox

@webblond07 · Регистрация: 15.03.2021

Студворк — интернет-сервис помощи студентам

Современные проблемы требуют современных решений, блин. Дано: youtube заблокируют со дня на день, и этого, похоже, не избежать, а надеяться, что у всех пользователей сайта будет впн, я не могу. Нужно срочно подготовить соломку...
На сайте есть куча видео, красиво сверстанных превьюшками, по клику на которые открывается всплывающее окно с видео. Использую fancybox.

HTML5
1
2
3
<a href="https://www.youtube.com/watch?v=%youtube_id%" data-fancybox>
    <img src="https://i.ytimg.com/vi/%youtube_id%/hqdefault.jpg">
</a>

Как сделать тоже самое для видео с (далее нецензурно) RuTube? Просто самый логичный способ не работает.

HTML5
1
2
3
<a href="https://rutube.ru/video/%rutube_id%/" data-fancybox>
    <img src="https://preview.rutube.ru/preview/%rutube_id%.webp">
</a>

Мало того, что я обрыла весь интернет и сканером кода сами рутуб-страницы, но так и не поняла, как, зная айдишник видео, достать статичную обложку, а не слайдшоу, которое мы видим, если на рутубе навести курсор на ролик. Так и само видео в окне всплывающем не запускается. Плагин fancybox выдает ошибку. Может быть, кто-то уже знает, что с этим делать? Уверена, через пару дней все вокруг схватятся за голову, срочно перелопачивая сайты заказчиков, перенесших видео с youtube на rutube. Давайте поможем им все вместе.

@CyberBaloo · 04.10.2023, 13:17

AlexQ00,
Спасибо!
Попробую - отпишусь ещё раз.

@CyberBaloo · 04.10.2023, 14:29

AlexQ00,
Нет, не работает. Показывает опять:

Как встроить видео с Rutube в модальное окно fancybox

@Anton-2017 · 11.09.2024, 09:48

Тема очень актуальная, хочу оживить.
Может кто-то справился с задачей?

@tgarl · 11.09.2024, 14:44

А в чем проблема подключать так же как ютюб? тоже смотрите ссылку поделиться и там будут варианты как на ютубе

Code
1
<iframe width="720" height="405" src="https://rutube.ru/play/embed/fb4b229933cf3e010bad6a7cb9fb1f5a/" frameBorder="0" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

соответсвенно копируете и вставляете к себе

@Anton-2017 · 11.09.2024, 15:00

Посмотрите архив, нужно для слайд шоу, скрипт необходимо поправить для Рутуба.
Про iframe это понятно работает.

@tgarl · 11.09.2024, 16:54

а, понял. Это вам нужно скачать тогда фансибокс с поддержкой рутюба, а так он с ним не дружит по умолчанию

@Anton-2017 · 11.09.2024, 19:50

Скачивал скрипт с Рутубом здесь
не работает(((

@evikza · 11.09.2024, 20:31

Anton-2017, Да оно работает, только реагирует на ссылки вида:

Code
1
https://rutube.ru/video/0958533d25439aad3d064bf7e9d3fec2

Но, не на такие:

Code
1
https://rutube.ru/play/embed/2428e1caaa8f0823af8ca5dc86725bba

Нужно регулярное выражение изменить. Скорее всего в этом у вас проблема.

Добавлено через 29 минут
Обновил Gist на Github. Регулярное выражение вот такое:

JavaScript
1
/^.+rutube.ru\/.*\/(.*\/)?([\w]+)(.*)\/?/

Подтягивает ссылки вида:

Code
1
2
3
4
5
https://rutube.ru/video/004b8d28da18405b9633fb53e55a03b8
https://rutube.ru/play/embed/004b8d28da18405b9633fb53e55a03b8
https://rutube.ru/live/video/5c9327074e25ca86f3111d4085cbbb65/
https://rutube.ru/api/video/recommendation/004b8d28da18405b9633fb53e55a03b8/?mode=pilot
https://rutube.ru/api/play/options/004b8d28da18405b9633fb53e55a03b8/

@Anton-2017 · 11.09.2024, 20:55

Сообщение от evikza

Скорее всего в этом у вас проблема

С файлом обновленным jquery.fancybox.js стало открываться сразу на Рутубе, не в окне(((.
Шлю новый код. В архиве есть файл fancybox.umd.js с ним открывается в окне!

@evikza · 11.09.2024, 21:09

Anton-2017, в консоли же есть вывод ошибок. У вас не подключена библиотека jQuery. Версия 3.x.x работает через неё. А так, всё работает.

@Segera · 16.09.2024, 08:09

Добавлено через 14 секунд
мне кажется, используя rutube.ru, придется слишком заморачиваться с простой задачей.
Лучше использовать сайт платформа, где в кнопке поделиться имеется практически полный аналог с ю-трубой.
пример с планкера
Если конечно правильно понял идею задания

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML>
<html>
 
<head>
  <!-- <link type="text/css" rel="stylesheet" href="my.css"> -->
  <meta charset="utf-8">
  <!-- <script defer src="script.js"></script> -->
</head>
 
<body>
 
<h3>2024/Смешные видео</h3>
<iframe width="560" height="315" src="https://plvideo.ru/embed/9Jmwr6azMEXa" title="2024/Смешные видео" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
</form>
</body>
</html>

@gogolik · 16.09.2024, 14:19

Segera, нет, неправильно.

@Segera · 16.09.2024, 14:23

Сообщение от gogolik

неправильно.

где и что? А то столько вокруг неправильного, даже не знаю на что посмотреть.
В планкере хотя бы похоже на правильно?

@gogolik · 16.09.2024, 14:26

Segera, в планкере нет фансибокса с встроенным рутюбом. Соответственно,

Сообщение от Segera

Если конечно правильно понял идею задания

неправильно.

К тому же, коды должны быть на форуме. Friendly reminder.

Новые блоги и статьи Все статьи Все блоги /
Нейтральные знания ..., ... чистая наука. Пока что-то проходит модерацию на Хабре, стоит развить мысль ... Hrethgir 20.07.2026 К таким радикальным взглядам я конечно в той публикации не приходил, но чтобы скоротать вечер, решил углубиться немного. 1. Почему показания термометра заряжены целью? Цель заложена в самом. . .	Установка нескольких штампов электронной подписи в строго определенных местах файла docx ВладимирСамохин 19.07.2026 (В!) Работа с Электронной подписью - это неотъемлемая часть современного документооборота. Но что делать, если нужно поставить несколько штампов электронной подписи в строго определенных местах. . .	сукцессия 35. Научная статья о проделанной работе anaschu 19.07.2026 Написал в формате латекс и пдф	Вангую, что это не пройдёт модерацию, и на неделе я запущу свой сервер. Hrethgir 19.07.2026 Эта публикация сейчас в песочнице и ждёт приглашения. https:/ / habr. com/ ru/ sandbox/ 295048/ По ссылке 403. Не очень информативно такую ссылку постить. Запись от Usaga размещена Сегодня в 06:46 . . .
сукцессия 33. открытые вопросы от клауде anaschu 19.07.2026 "Что накопилось за эту часть А — тринадцать правок, из которых шесть пришли из ваших вопросов и каждая оказалась реальной ошибкой, а не калибровкой: односторонний симбиоз, отсутствующий листопад,. . .	32 сукцессия anaschu 19.07.2026 сукцессия 28‑мерное ядро стабилизировано Коллеги, фиксирую разбор инженерных правок и их изоморфную проекцию на экономику, меметику и половой отбор. Модель теперь не «подкручивает» сходимость —. . .	сукцессия 31: модель микоризы - это модель ещё нескольких явлений, социальных и экономических anaschu 18.07.2026 Теория «Всего»: апдейт v1. 1. 2 — 28‑мерное ядро стабилизировано Коллеги, фиксирую разбор инженерных правок и их изоморфную проекцию на экономику, меметику и половой отбор. Модель теперь не. . .	сукцессия 30. Массив проверяющих друг друга моделей anaschu 18.07.2026 Архитектура сети взаимопроверяющих моделей микоризной сукцессии (v2. 0) Развитие тензорного ОДУ-ядра и создание кросс-платформенного калибровочного полигона Уважаемые коллеги! В продолжение. . .

@CyberBaloo 0 / 0 / 0 Регистрация: 27.07.2023 Сообщений: 4
	04.10.2023, 13:17
	AlexQ00, Спасибо! Попробую - отпишусь ещё раз. 0

@CyberBaloo 0 / 0 / 0 Регистрация: 27.07.2023 Сообщений: 4
	04.10.2023, 14:29
	AlexQ00, Нет, не работает. Показывает опять: 0

@Anton-2017 0 / 0 / 0 Регистрация: 24.10.2017 Сообщений: 10
	11.09.2024, 09:48
	Тема очень актуальная, хочу оживить. Может кто-то справился с задачей? 0

@tgarl 469 / 432 / 120 Регистрация: 15.02.2012 Сообщений: 1,961
	11.09.2024, 16:54
	а, понял. Это вам нужно скачать тогда фансибокс с поддержкой рутюба, а так он с ним не дружит по умолчанию 0

@Anton-2017 0 / 0 / 0 Регистрация: 24.10.2017 Сообщений: 10
	11.09.2024, 19:50
	Скачивал скрипт с Рутубом здесь не работает((( 0

@evikza 968 / 530 / 244 Регистрация: 20.05.2015 Сообщений: 776
	11.09.2024, 21:09
	Anton-2017, в консоли же есть вывод ошибок. У вас не подключена библиотека jQuery. Версия 3.x.x работает через неё. А так, всё работает. 1

@gogolik Супер-модератор 3962 / 2126 / 833 Регистрация: 13.03.2010 Сообщений: 6,984
	16.09.2024, 14:19
	Segera, нет, неправильно. 0