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

Новые блоги и статьи Все статьи Все блоги /
Когда логика программы не спасает от человеческих ошибок Maks 18.08.2026 В последнее время всё чаще и чаще сталкиваюсь с таким явлением, как абсолютная невнимательность (или глупость) пользователей. Проявляется это чаще всего на работе в коллективе. Допустим, человек с. . .	Лето уходит kumehtar 17.08.2026	Мысли в слух kumehtar 17.08.2026 Забавно, насколько сейчас стала доступна информация. Например о магии, духовном развитии, медитациях, и других подобных направлениях, ранее зачастую тайных, передаваемых от учителя к ученику. Хотя. . .	Перемещение строк из ТЧ в другой документ с учетом текущего пробега Maks 17.08.2026 Реализация из решения ниже выполнена на примере нетипового документа "Автозапчасти", с ТЧ "Шины". За основу взят алгоритм отсюда: https:/ / www. cyberforum. ru/ blogs/ 359708/ 10838. html Задача: . . .
Саморегулирующийся социальный контракт для сервера cross-section. Hrethgir 14.08.2026 С кодом конечно таких глубоких размышлений пока не было, впрочем я уже привык к алгоритмизации. Суть предмета записи: снова в диалоге с нейросетью (я взял пока себе ник для учётки админа - Rector). . . .	Часы электронные Uhbif79 12.08.2026 Выкладываю программу часов. Программа позволяет: 1. Использовать системное время и дату, 2. Есть возможность вводить время и дату вручную. 3. Реализованы 2 будильника: начало и конец рабочего дня. . . .	Часы с будильником на основе класса QLCDNumber Uhbif79 12.08.2026 Всем добрый день, выкладываю программу часов с будильником на основе класса QLCDNumber. Здесь я пробовал самостоятельно создавал классы, впервые столкнулся с видимостью переменной одного класса из. . .	Установка MinGW GCC 16.2 и CMake 8Observer8 10.08.2026 VK Видео: https:/ / vkvideo. ru/ video-240781534_456239017 YouTube: eY5-5PyI9NM Текстовая версия

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