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

@evikza · 18.03.2022, 22:22

webblond07, здравствуйте. Всё сделать «просто» как у Youtube, к сожалению не получится. Для каждого видео есть определённый идентификатор который лежит на сервере и он отличается от идентификатора видео. При загрузки страницы он при помощи JS подтягивается и вставляется в img.

Вам придется самим получать эти изображение — делать для каждого видео запрос к серверу Rutube. Парсить JSON и вытаскивать оттуда thumbnail_url и подставлять его в img.

Нашел, по крайней мере 2 точки, через которые можно получить URL изображения.

1. При вставке embed-видео происходит обращение к серверу:

Code
1
https://rutube.ru/api/play/options/{ид_видео}/

2. Недокументированный API:

Code
1
https://rutube.ru/pangolin/api/web/video/{ид_видео}/?pageType=video&client=wdp

В обоих случаях, приходит JSON с полными метаданными видео. Оттуда и забираем URL изображения.

У вас, судя по тегам %youtube_id% используется какой-то шаблонизатор. Получайте изображения на стороне сервера.

… или при помощи JS на стороне клиента.

@webblond07 · 18.03.2022, 23:29 **[ТС]**

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

Вам придется самим получать эти изображение — делать для каждого видео запрос к серверу Rutube. Парсить JSON и вытаскивать оттуда thumbnail_url и подставлять его в img.

о боги, зачем они настолько все перемудрено сделали))) - вопрос риторический... Спасибо! Это все-таки лучше, чем своими руками делать скрины к каждому видео, заливать на свой хостинг и прописывать к каждому ссылки.

Но второй вопрос: видео-то само как по-человечески в pop-up от fancybox'a вставить?) Я проверила на vimeo и на просто mp4-файле, завалявшемся на сервере: со всеми всё спокойно работает, но только не с рутубом, конечно...

Есть, конечно, колхозный вариант через iframe, но он требует указания абсолютных значений width и height, а это как-то совсем фигово для адаптивности...
Ну типа того:

HTML5
1
2
3
4
5
<a href='data:text/html,<iframe width="720" height="410" src="https://rutube.ru/play/embed/%rutube_id%?skinColor=000000" frameBorder="0" allow="clipboard-write" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
      data-fancybox
      data-type="iframe">
    <img src="">
</a>

Можно это по-нормальному как-то сделать?

@evikza · 19.03.2022, 02:03

webblond07, какие ошибки прилетают?

Насколько я понимаю, для Youtube и Vimeo в Fancybox уже имеются встроенные методы работы с этими платформами. А именно, при клике на ссылку вида:

HTML5
1
<a href="https://www.youtube.com/watch?v=%youtube_id%" data-fancybox>

Запускается скрипт, которые вытаскивает идентификатор видео с Youtube. Подставляет embed-видео в pop-up и загружает его. Если дело в этом, нужно написать скрипт, который будет брать также идентификатор видео и вставлять embed. Я не знаю из-за чего Fancybox ругается, может причина и совсем в другом.

… заливать на свой хостинг и прописывать к каждому ссылки …

Еще как вариант, написать обработчик на хостинге, на том же PHP. Чтобы он сам делал запрос к API и отдавал саму картину.

Code
1
2
3
Что-то подобное:
 
https://site.ru/helper/getVideoThumbnail?id=%rutube_id%

UPD:

Какую версию Fancybox используете?

@webblond07 · 19.03.2022, 09:11 **[ТС]**

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

webblond07, какие ошибки прилетают?

При загрузке страницы нет никаких ошибок. При попытке открыть поп-ап с видео, в самом поп-апе пишется стандартное для fancybox "the request content cannot be loaded. Pease, try again later."

В консоли ошибок по-прежнему нет, вылезает warning

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://rutube.ru/video/ee632f501c6be9803a5556e0fd6e0222/ with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
Image (async)
attr @ jquery-3.6.0.min.js:2
a.attr @ jquery-migrate-1.4.1.min.js:2
$ @ jquery-3.6.0.min.js:2
attr @ jquery-3.6.0.min.js:2
setBigImage @ jquery.fancybox.min.js:11
setImage @ jquery.fancybox.min.js:11
loadSlide @ jquery.fancybox.min.js:11
jumpTo @ jquery.fancybox.min.js:11
init @ jquery.fancybox.min.js:11
b @ jquery.fancybox.min.js:11
open @ jquery.fancybox.min.js:12
i @ jquery.fancybox.min.js:11
dispatch @ jquery-3.6.0.min.js:2
v.handle @ jquery-3.6.0.min.js:2

Не знаю, влияет ли именно он на не работу видео?

Версия fancybox: fancyBox v3.5.7. Я знаю, что уже давно есть v4, но у меня на этом плагине еще куча всяких адаптивных галерей фотографий висит, и куча каких-то неисправленных разработчиками багов ловилась в этих галереях, пришлось вернуться к более стабильной версии.

@evikza · 19.03.2022, 18:11

webblond07, еще раз здравствуйте.

Форкнул репозиторий с версией v3.5.7, добавил возможность embed'ить видео с Rutube.

Весь собранный бандл нет смысла сюда выкладывать.

Приложу только файлы на выходе и HTML с примером:

Code
1
2
3
4
5
6
index.html
jquery.fancybox.css
jquery.fancybox.js
jquery.fancybox.min.css
jquery.fancybox.min.js
version.txt

Если есть nodeJS, можете запустить npx serve в директории.

@evikza · 20.03.2022, 22:24

webblond07, я нашел всё же ссылку по которой можно получить непосредственно изображение — зная только идентификатор видео.

Изначально, пришлось залезть в официально API, которое уже давно deprecated. Там был метод для загрузки изображения на сервер, который можно вызывать с методом GET и получить JSON с ссылкой на изображение.

Code
1
https://rutube.ru/api/video/{ид_видео}/thumbnail/

А дальше, случайно и метод проб и ошибок, оказалось, что если подставить параметр ?redirect=1 в запрос, нам отдают изображение, но с редиректом.

Code
1
https://rutube.ru/api/video/{ид_видео}/thumbnail/?redirect=1

HTML5
1
2
3
<div class="cover">
  <img src="https://rutube.ru/api/video/{ид_видео}/thumbnail/?redirect=1" alt="">
</div>

@webblond07 · 10.04.2022, 16:27 **[ТС]**

evikza

Простите, мне так стыдно, что я раньше не ответила! Я временно впадала в надежду, что youtube все-таки помилуют, и не придется иметь дело с кривым на обе ноги rutube) Но тут на днях стало понятно, что от переноса роликов, увы точно никуда не деться теперь... Спасибо вам!) Попробовала на сайте ваше решение! Всё работает, как часы.
Разобраться в этой образине - это просто гениально, я считаю))) Низкий вам поклон)

@iVee_33 · 12.05.2022, 07:33

Здравствуйте. Подскажите пожалуйста, использовал ваши предоставленные материалы, только теперь, если добавлять в fancybox ссылку на видео в Rutube, то в модальном окне выдаёт ошибку 404 (в модальном окне отображается сам сайт Rutube и соответственно 404 ошибка самого сайта).

Т.е. при клике на открытие fancybox происходит запрос по адресу https://rutube.ru/play/embed/(ссылка на видео)?frameBorder=0, и сервер возвращает 404 ответ.

@gogolik · 12.05.2022, 08:38

iVee_33, а само видео доступно? У рутуба были проблемы в последние дни, может всё ещё лихорадит.

@iVee_33 · 12.05.2022, 08:40

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

@evikza · 12.05.2022, 13:23

iVee_33, здравствуйте.

Насколько я понял, возможность встраивания видео на данный момент не работает. Проблема со стороны Rutube.

@iVee_33 · 12.05.2022, 13:31

evikza, здравствуйте. Понял вас, спасибо за информацию. Будем ждать решения от Rutube.

@iVee_33 · 16.05.2022, 08:23

evikza, здравствуйте. Просто хотел сообщить, что проблема со стороны Rutube решена и видео корректно открываются. Ещё раз спасибо за помощь!

@bykovsky · 09.06.2022, 16:21

Здравствуйте, благодарю Вас за решение!
Есть один вопрос. На странице используем допустим три вида роликов: прямая ссылка на файл, youtube и rutube соответственно. Ссылки с атрибутами data-fancybox. При клике на ссылки появляется попап и видео запускается автоматом, кроме ссылки на ролик на Rutube, нужно дополнительно кликать кнопку play.
Как Вы считаете, можно ли как-то запускать видео по клику на ссылку автоматически? Спасибо

@evikza · 10.06.2022, 10:20

bykovsky, здравствуйте. Технически конечно можно это решить. Изначально не задавался этим вопросом.

Если рассматривать решение «в лоб», не затрагивая исходный код — можно проверять какой из фреймов загружается. Если это rutube — запускаем отложенный скрипт (задержка 2000 = 2 сек.).

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// инициализация fancybox
 
$('[data-fancybox]').fancybox({
  rutube: {
    autoplay: 1,
  },
  afterShow: function (instance, current) {
    if (current.contentSource === 'rutube') {
      current.$slide.find('iframe').on('load', function ($) {
        setTimeout(function () {
          $.currentTarget.contentWindow.postMessage(
            JSON.stringify({
              type: 'player:play', // отправляем команду на воспроизведение
              data: {},
            }),
            '*'
          );
        }, 2000); // задержка запуска 2000 — 2 сек.
      });
    }
  },
});

Что хочется сказать — видео может спокойной начать не воспроизводится самостоятельно, просто не загрузиться или что-нибудь поломается и пойдет не так. Потому что, даже на сайте Rutube autoplay не всегда срабатывает. Почему так, загадка.

В Google Chrome, при первом воспроизведении звук выкручен в 0.

@bykovsky · 10.06.2022, 16:26

evikza
Благодарю, решение рабочее

@Avircut · 12.10.2022, 08:43

Сейчас уже актуальная версия fancybox 4+, так что архив выше мне не подошел, доработал по примеру свою версию для 4.0.31 и прикладываю архив с папкой dist для этой версии.

@CyberBaloo · 04.08.2023, 14:29

Уф.., даже не знаю как попросить. Я в Джаве ни бум-бум, в html немного. Возникла та же проблема - надо переезжать на Рутубе а ролики с Рутуба не проигрываются в модальном окне fancybox.
Пробовал просто заменить файлы jquery.fancybox.min.css и jquery.fancybox.min.js из поста evikza - не сработало. У меня fancyBox v3.5.6.

Люди добры памажите!

Может кому не лень подправить мои файлы чтоб Рутуб открывался в fancyBox окнах?

Спасибо!

@AlexQ00 · 28.09.2023, 23:44

Актуальная версия fancybox 4+ с поддержкой rutube, в css добавил минимальные разрешения для iframe, а то у меня открывался rutube слишком маленьким

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

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

Решение

Решение

Решение

@webblond07 1 / 1 / 0 Регистрация: 15.03.2021 Сообщений: 33
	10.04.2022, 16:27 [ТС]
	evikza Простите, мне так стыдно, что я раньше не ответила! Я временно впадала в надежду, что youtube все-таки помилуют, и не придется иметь дело с кривым на обе ноги rutube) Но тут на днях стало понятно, что от переноса роликов, увы точно никуда не деться теперь... Спасибо вам!) Попробовала на сайте ваше решение! Всё работает, как часы. Разобраться в этой образине - это просто гениально, я считаю))) Низкий вам поклон) 0

@iVee_33 0 / 0 / 0 Регистрация: 05.03.2022 Сообщений: 4
	12.05.2022, 07:33
	Здравствуйте. Подскажите пожалуйста, использовал ваши предоставленные материалы, только теперь, если добавлять в fancybox ссылку на видео в Rutube, то в модальном окне выдаёт ошибку 404 (в модальном окне отображается сам сайт Rutube и соответственно 404 ошибка самого сайта). Т.е. при клике на открытие fancybox происходит запрос по адресу https://rutube.ru/play/embed/(ссылка на видео)?frameBorder=0, и сервер возвращает 404 ответ. 0

@gogolik Супер-модератор 3961 / 2079 / 832 Регистрация: 13.03.2010 Сообщений: 6,851
	12.05.2022, 08:38
	iVee_33, а само видео доступно? У рутуба были проблемы в последние дни, может всё ещё лихорадит. 0

@iVee_33 0 / 0 / 0 Регистрация: 05.03.2022 Сообщений: 4
	12.05.2022, 08:40
	gogolik, да, само видео на сайте Rutube доступно. Я тоже подумал, что проблема может быть связана с атакой на видеохостинг. В любом случае, вопрос не срочный и есть возможность подождать полного восстановления сайта. 0

@evikza 968 / 530 / 244 Регистрация: 20.05.2015 Сообщений: 776
	12.05.2022, 13:23
	iVee_33, здравствуйте. Насколько я понял, возможность встраивания видео на данный момент не работает. Проблема со стороны Rutube. 0

@iVee_33 0 / 0 / 0 Регистрация: 05.03.2022 Сообщений: 4
	12.05.2022, 13:31
	evikza, здравствуйте. Понял вас, спасибо за информацию. Будем ждать решения от Rutube. 0

@iVee_33 0 / 0 / 0 Регистрация: 05.03.2022 Сообщений: 4
	16.05.2022, 08:23
	evikza, здравствуйте. Просто хотел сообщить, что проблема со стороны Rutube решена и видео корректно открываются. Ещё раз спасибо за помощь! 0

@bykovsky 0 / 0 / 0 Регистрация: 09.06.2022 Сообщений: 2
	09.06.2022, 16:21
	Здравствуйте, благодарю Вас за решение! Есть один вопрос. На странице используем допустим три вида роликов: прямая ссылка на файл, youtube и rutube соответственно. Ссылки с атрибутами data-fancybox. При клике на ссылки появляется попап и видео запускается автоматом, кроме ссылки на ролик на Rutube, нужно дополнительно кликать кнопку play. Как Вы считаете, можно ли как-то запускать видео по клику на ссылку автоматически? Спасибо 0

@bykovsky 0 / 0 / 0 Регистрация: 09.06.2022 Сообщений: 2
	10.06.2022, 16:26
	evikza Благодарю, решение рабочее 0