Как открывать видео в лайтбоксе через кнопку в elementor?

Ссылка скопирована
Видео
1 ответ

Здравствуйте! Подскажите пожалуйста, как открыть видео в лайтбоксе, через кнопку средствами elementor free?

Дополнительно:

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Елена Вебер Ответ

В Elementor Free полноценный динамический lightbox ограничен, но открыть видео по кнопке можно несколькими способами. Самый простой — использовать ссылку на YouTube/Vimeo и включить открытие в lightbox, если эта опция доступна в вашем виджете/версии. Если нет, подключайте лёгкий lightbox-плагин или делайте свой модальный блок.

Без Pro можно сделать так:

  • добавить кнопку Elementor;
  • в ссылку поставить URL видео, например YouTube;
  • добавить кнопке CSS-класс, например js-video-lightbox;
  • подключить скрипт lightbox или использовать уже установленный плагин.

Пример с basic Fancybox, если библиотека уже подключена:

<a class="js-video-lightbox" href="https://www.youtube.com/watch?v=VIDEO_ID" data-fancybox>Смотреть видео</a>

<a class="js-video-lightbox" href="https://www.youtube.com/watch?v=VIDEO_ID" data-fancybox>Смотреть видео</a>

Если библиотек нет, можно сделать свой простой модал:

document.addEventListener('click', function (event) {
  const link = event.target.closest('.js-video-lightbox');
  if (!link) return;
 
  event.preventDefault();
 
  const modal = document.querySelector('.video-modal');
  const iframe = modal.querySelector('iframe');
  iframe.src = link.href.replace('watch?v=', 'embed/');
  modal.classList.add('is-open');
});

document.addEventListener('click', function (event) { const link = event.target.closest('.js-video-lightbox'); if (!link) return; event.preventDefault(); const modal = document.querySelector('.video-modal'); const iframe = modal.querySelector('iframe'); iframe.src = link.href.replace('watch?v=', 'embed/'); modal.classList.add('is-open'); });

Но свой lightbox нужно нормально закрывать, очищать iframe.src при закрытии, поддерживать ESC, фокус и мобильную версию. Поэтому на практике проще использовать нормальный lightbox-плагин, если на сайте уже нет такого функционала.

Итог: средствами Elementor Free это зависит от доступных настроек виджета. Если встроенного lightbox нет, ставьте лёгкий lightbox или делайте модальное окно через класс кнопки. Не вставляйте видео сразу на страницу, если оно должно открываться только по клику: iframe может замедлять загрузку.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Linux Как диагностировать зависание RK3568 U-boot на Starting kernel? 1 ответ