Как встроить видео с 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.

Новые блоги и статьи Все статьи Все блоги /
Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .	Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .
Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .	Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))

@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,962
	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 Супер-модератор 3980 / 2147 / 833 Регистрация: 13.03.2010 Сообщений: 7,044
	16.09.2024, 14:19
	Segera, нет, неправильно. 0