DC jVideo – nowoczesne wideo w Joomla 5/6 (inline i lightbox)
Autor: Paweł Nosko

DC jVideo – nowoczesne wideo w Joomla 5/6 (inline i lightbox)

Spis treści:
  1. Co potrafi DC jVideo?
  2. Składnia shortcode {video}
  3. Obsługiwane źródła wideo
  4. Jak działa lightbox w DC jVideo?
  5. Sterowanie i UX
  6. Responsywność
  7. Dlaczego bez jQuery?
  8. Dla kogo jest DC jVideo?
  9. Pobieranie i instalacja
  10. Podsumowanie

Osadzanie wideo w Joomla teoretycznie jest proste — w praktyce bardzo często bywa irytujące i nieprzewidywalne.


Iframe’y wklejane ręcznie do treści, ciężkie dodatki wymagające osobnych widoków, brak kontroli nad wyglądem na mobile, brak animacji, brak spójności z designem strony. Do tego dochodzi chaos w edytorach: przełączanie trybu HTML, poprawianie kodu po zapisie, walka z filtrami treści. Efekt? Wideo jest, ale UX leży.

Właśnie z tego powodu powstał DC jVideo z którym tworzenie stron internetowych z galeriami medialnymi to czysta przyjemność. 

To lekki plugin typu content, który pozwala osadzać wideo w artykułach Joomla w sposób nowoczesny i przewidywalny — bez iframe’owego bałaganu i bez kombinowania w edytorze. Zamiast skomplikowanych struktur używamy prostego shortcode, który daje pełną kontrolę nad tym, jak i gdzie wideo się pojawi.

DC jVideo pozwala:

  • wyświetlać wideo bezpośrednio w treści lub w efektownym lightboxie,

  • obsługiwać pliki HTML5, YouTube i Vimeo jednym mechanizmem,

  • kontrolować UX (animacje, zachowanie na mobile, zamykanie klawiszem ESC),

  • zachować pełną spójność wizualną z projektem strony.

Bez ciężkich komponentów.
Bez edytorowych sztuczek.
Bez kompromisów w doświadczeniu użytkownika.

To narzędzie stworzone dla osób, które chcą mieć kontrolę, a nie tylko „jakieś wideo w artykule”.

Warto przeczytać: Tworzenie stron WWW dla firm

 

Co potrafi DC jVideo?

DC jVideo został zaprojektowany dokładnie pod realne potrzeby pracy z Joomla — bez kombinowania, bez obejść i bez walki z edytorem treści.
Plugin robi jedną rzecz, ale robi ją porządnie: osadza wideo dokładnie tak, jak tego oczekujesz 🎯

 

▶️ Osadzanie wideo bezpośrednio w treści artykułu

Najprostszy scenariusz?
Jedna linijka shortcode i wideo pojawia się bezpośrednio w treści artykułu — bez iframe’ów, bez dodatkowych bloków, bez niszczenia layoutu.

DC jVideo korzysta z natywnego HTML5 lub sprawdzonych mechanizmów Video.js, dzięki czemu wideo:

  • 📐 skaluje się poprawnie

  • 🔒 zachowuje proporcje

  • 📱 działa dobrze na desktopie i mobile

Bez ręcznego stylowania i bez niespodzianek.

 

Demo

Jesteś ciekawy jak działa w praktyce DC JVideo? Poniżej znajdziesz shortcode oraz jego efekt.

Shortcode:

{ video href="https://youtu.be/rBrd_3VMC3c?si=j_HP6K1sqlek84Jq"  mode="lightbox" anchor="Zobacz wideo"}

 

Efekt:

 

🎬 Tryb lightbox z animacją

Jeśli nie chcesz „rozpychać” treści wideo — możesz użyć trybu lightbox.

W tym trybie:

  • w artykule pojawia się estetyczny przycisk (z ikoną i własnym tekstem),

  • po kliknięciu ekran jest zasłaniany animowaną przesłoną,

  • wideo wjeżdża od dołu z efektem bounce,

  • całość można zamknąć kliknięciem w tło lub klawiszem ESC ⎋.

To nie jest gotowy modal z frameworka — to kontrolowany, lekki UX, który nie koliduje z szablonem ani innymi rozszerzeniami.

 

🔗 Obsługa różnych źródeł wideo

DC jVideo automatycznie rozpoznaje źródło wideo i dobiera odpowiedni sposób renderowania.
Bez dodatkowych parametrów, bez zgadywania.

Obsługiwane są:

  • 🎞 HTML5 (mp4) — pliki lokalne lub z CDN

  • ▶️ YouTube — standardowe linki i skrócone URL-e

  • 🎥 Vimeo — osadzanie przez player iframe

Dla użytkownika końcowego różnica jest niewidoczna — wszystko działa na jednym shortcode.

 

⚡ Brak zależności od jQuery

DC jVideo działa w oparciu o czysty JavaScript.
Nie ładuje jQuery, nie wymusza jego obecności i nie koliduje z nowoczesnymi szablonami.

To szczególnie ważne w Joomla 5 i 6, gdzie:

  • jQuery nie jest już domyślnym fundamentem,

  • coraz więcej projektów opiera się na JS bez zależności 🚀.

 

✅ Pełna kompatybilność z Joomla 5 i 6

Plugin został napisany od początku z myślą o aktualnych wersjach Joomla:

  • poprawny plugin typu content,

  • brak deprecated API,

  • zgodność z nowym cyklem rozwoju Joomla.

DC jVideo działa zarówno w Joomla 5, jak i Joomla 6 —
bez zmian w kodzie i bez dodatkowych warstw kompatybilności 🧠

 

Składnia shortcode {video}

DC jVideo został zaprojektowany tak, aby składnia była maksymalnie prosta, a jednocześnie dawała pełną kontrolę nad sposobem wyświetlania wideo.
W praktyce sprowadza się to do jednego shortcode z kilkoma opcjonalnymi parametrami.

📢 Uwaga: Między klamrą { a video w shordcode nie może być spacji w przykładach zrobiłem to celowo aby plugin moich przykładowych shortcodów nie zamienił na video 😉

 

Podstawowe użycie (inline)

{ video href="/images/video/example.mp4"}

To najprostszy i najczęściej używany wariant.

 

Co się wtedy dzieje?

  • 🎥 wideo jest osadzane bezpośrednio w treści artykułu

  • 📐 player jest w pełni responsywny (Video.js vjs-fluid, vjs-16-9)

  • 📱 poprawnie skaluje się na desktopie i urządzeniach mobilnych

  • ⚡ preload domyślnie ustawiony jest w sposób bezpieczny dla SEO

  • 🧩 brak iframe’ów i zewnętrznych wrapperów niszczących layout

Ten tryb idealnie sprawdza się wtedy, gdy wideo jest integralną częścią treści — np. poradnika, prezentacji produktu czy case study.

Tryb lightbox

{ video href="/images/video/example.mp4" mode="lightbox" anchor="Zobacz wideo" poster="/images/video/example.png" }

 

Jeśli nie chcesz, aby wideo „rozpychało” treść artykułu, możesz użyć trybu lightbox.

W tym wariancie:

  • 🎬 w treści pojawia się estetyczny przycisk z własnym tekstem (anchor)

  • 🖱 kliknięcie nie przeładowuje strony — wszystko dzieje się dynamicznie

  • 🌑 tło przyciemnia się animacją rozszerzającego się koła

  • 🚀 wideo wjeżdża od dołu z efektem bounce

  • ⌨️ modal można zamknąć kliknięciem w tło lub klawiszem ESC

Lightbox został zaprojektowany od zera specjalnie pod DC jVideo —
to nie jest gotowy modal z frameworka, tylko lekki, kontrolowany UX, który nie koliduje z szablonem Joomla.

 

Obsługiwane źródła wideo

DC jVideo został zaprojektowany tak, aby nie zmuszać Cię do myślenia o technologii, tylko o treści. Plugin sam rozpoznaje źródło wideo i dobiera właściwy sposób jego osadzenia — bez dodatkowych parametrów, bez przełączników, bez zgadywania.

 

HTML5 (lokalne pliki) 🎥

Najczystsza i najbardziej kontrolowana forma osadzania wideo.

DC jVideo obsługuje:

  • pliki mp4 (opcjonalnie także webm),

  • wideo hostowane lokalnie lub na własnym CDN,

  • natywny HTML5 player (bez iframe).

Dzięki temu:

  • masz pełną kontrolę nad plikiem,

  • nie polegasz na zewnętrznych serwisach,

  • wideo ładuje się dokładnie tak, jak zaplanujesz (preload, poster, responsywność).

To idealne rozwiązanie dla:

  • stron firmowych,

  • landing page’y,

  • własnych materiałów wideo i prezentacji.

 

YouTube ▶️

Jeśli korzystasz z YouTube — DC jVideo obsłuży to automatycznie.

Wystarczy wkleić zwykły link do filmu, a plugin:

  • rozpozna źródło,

  • osadzi wideo przez iframe,

  • w trybie lightbox uruchomi autoplay.

Nie musisz:

  • generować kodów embed,

  • wyciągać ID filmu,

  • ustawiać parametrów ręcznie.

Dla użytkownika końcowego wszystko wygląda spójnie — niezależnie od tego, czy źródłem jest plik mp4 czy YouTube.

 

Vimeo 🎬

Vimeo działa analogicznie do YouTube, ale z naciskiem na czystość i minimalizm.

DC jVideo:

  • wykrywa link Vimeo automatycznie,

  • osadza wideo przez oficjalny player iframe,

  • nie wymaga dodatkowych bibliotek ani integracji.

To dobre rozwiązanie dla:

  • portfolio,

  • projektów kreatywnych,

  • stron, gdzie liczy się estetyka i jakość prezentacji.

 

Jedna składnia, różne źródła

Najważniejsze:
dla autora treści nie ma znaczenia, skąd pochodzi wideo.

Ten sam shortcode:

{ video href="/..."}

działa tak samo dla:

  • pliku mp4,

  • linku YouTube,

  • linku Vimeo.

Resztą zajmuje się DC jVideo.

 

Jak działa lightbox w DC jVideo?

Lightbox w DC jVideo nie jest gotowym komponentem z frameworka ani kolejną „nakładką z internetu”. To autorskie, lekkie rozwiązanie zaprojektowane tak, aby nie kolidowało z szablonem Joomla i dawało pełną kontrolę nad UX 🎯

Cały mechanizm składa się z trzech logicznych etapów.

 

1️⃣ Przycisk w treści

W trybie mode="lightbox" plugin nie osadza wideo bezpośrednio w artykule.
Zamiast tego generowany jest estetyczny przycisk:

  • tworzony automatycznie przez plugin

  • z ikoną 🎬 i własnym tekstem (parametr anchor)

  • bez zależności od edytora treści

Najważniejsze jest to, że wszystkie dane wideo przekazywane są w jednym atrybucie data-jvideo, w postaci JSON-a.
JavaScript dostaje dokładnie to, czego potrzebuje — bez globalnych zmiennych i bez zgadywania.

 

2️⃣ Backdrop – animowane tło

Po kliknięciu przycisku uruchamiany jest backdrop, czyli animowana przesłona tła 🌑

Jak to działa?

  • JavaScript dynamicznie dodaje element .dc-jvideo-backdrop

  • na początku widoczna jest mała kropka na środku ekranu

  • kropka płynnie rozszerza się w koło, aż wypełni cały viewport

  • tło zostaje przyciemnione i blokuje interakcję z treścią strony

Efekt jest lekki wizualnie, a jednocześnie bardzo czytelny dla użytkownika — wiadomo, że „wchodzimy w tryb wideo”.

 

3️⃣ Modal z wideo

Dopiero po zakończeniu animacji tła pojawia się właściwy modal 🎥

W tym etapie:

  • wideo jest wyśrodkowane w pionie i poziomie

  • szerokość dopasowuje się do ekranu (desktop i mobile)

  • zachowane są proporcje obrazu

  • całość wjeżdża od dołu z efektem bounce, zamiast pojawiać się „na twardo”

Modal można zamknąć:

  • przyciskiem zamknięcia ❌

  • kliknięciem w tło

  • klawiszem ESC

Dzięki temu lightbox jest nie tylko efektowny, ale też intuicyjny i zgodny z dobrymi praktykami UX.

 

Sterowanie i UX

DC jVideo od początku był projektowany z myślą o naturalnym, przewidywalnym UX – bez zaskoczeń i bez „walki” z użytkownikiem. Wszystkie interakcje są intuicyjne i działają dokładnie tak, jak się tego spodziewasz 🎯

Zamykanie lightboxa
Użytkownik ma kilka równorzędnych sposobów wyjścia z trybu wideo:

  • przycisk „×” widoczny w rogu modala ❌

  • klawisz ESC – działa zawsze, niezależnie od fokusu ⌨️

  • kliknięcie poza obszarem wideo, w przyciemnione tło 🌑

Nie ma tu „pułapek” ani sytuacji, w których modal zostaje na ekranie bez wyraźnej drogi wyjścia.

Blokada scrolla w tle
Po otwarciu lightboxa:

  • przewijanie strony w tle zostaje zablokowane,

  • cała uwaga użytkownika skupia się na wideo,

  • layout strony nie „ucieka” ani nie przeskakuje.

To drobny detal, ale bardzo mocno wpływa na odbiór całości 👍

Czyszczenie DOM po zamknięciu
Po zamknięciu lightboxa:

  • modal jest usuwany z DOM,

  • backdrop znika,

  • nie zostają żadne ukryte elementy ani nasłuchy zdarzeń.

Dzięki temu:

  • nie ma problemów z wydajnością,

  • nie ma konfliktów przy kolejnym otwarciu wideo,

  • kod pozostaje czysty i przewidywalny 🧹

 

Responsywność

DC jVideo zachowuje się poprawnie na każdym ekranie, bez dodatkowych breakpointów i bez ręcznego kombinowania.

Tryb inline

  • wideo zajmuje 100% szerokości kontenera,

  • zachowuje proporcje 16:9,

  • płynnie skaluje się w kolumnach, artykułach i gridach 📐

Idealne rozwiązanie do treści poradnikowych, landingów i blogów.

Tryb lightbox
W trybie modalnym:

  • wideo ma maksymalną szerokość (np. 900px),

  • wysokość jest ograniczona do 80vh,

  • całość jest zawsze wyśrodkowana w pionie i poziomie.

Na mniejszych ekranach (mobile, tablet):

  • wideo automatycznie dopasowuje się do dostępnej przestrzeni,

  • nie wychodzi poza viewport,

  • nie jest ucinane ani rozciągane 📱

Efekt końcowy: jedno rozwiązanie, które działa spójnie na desktopie i mobile – bez osobnych wersji i bez dodatkowych warstw CSS.

 

Dlaczego bez jQuery?

To była świadoma decyzja, a nie przypadek.

 

Joomla 5 i nowoczesne podejście

Joomla 5 nie używa jQuery domyślnie, a coraz więcej szablonów i rozszerzeń idzie w stronę czystego JavaScriptu. DC jVideo idealnie wpisuje się w ten kierunek.

 

Czysty, nowoczesny JavaScript

Plugin opiera się wyłącznie na:

  • natywnych API przeglądarki,

  • prostych, czytelnych funkcjach,

  • przewidywalnym zachowaniu bez „magii frameworków”.

To oznacza łatwiejszy debugging i większą kontrolę nad kodem 🔧.

 

Brak konfliktów z szablonami

Brak jQuery to także:

  • brak konfliktów wersji,

  • brak nadpisywania globalnych obiektów,

  • brak problemów z innymi pluginami czy builderami.

DC jVideo działa obok szablonu, a nie przeciwko niemu.

 

Mniejszy overhead

Mniej kodu =

  • szybsze ładowanie strony ⚡

  • mniejszy payload JS

  • lepsze Core Web Vitals

To szczególnie ważne, gdy wideo jest tylko jednym z elementów większej strony.

 

Dla kogo jest DC jVideo?

DC jVideo nie jest kolejną wtyczką „do wszystkiego”.
To narzędzie stworzone dla osób, które świadomie pracują z treścią i UX w Joomla 🎯

 

Dla twórców stron w Joomla 5 i 6

Jeśli budujesz strony na aktualnych wersjach Joomla i nie chcesz ciągnąć za sobą starych zależności, DC jVideo idealnie wpisuje się w nowoczesne podejście:

  • bez jQuery,

  • bez przestarzałych dodatków,

  • bez walki z edytorem treści.

Plugin działa przewidywalnie i dokładnie tam, gdzie powinien — w treści artykułu.

 

Dla blogów technicznych i produktowych

Wideo w artykułach poradnikowych, prezentacjach funkcji czy opisach produktów często jest konieczne, ale:

  • iframe’y psują layout,

  • gotowe embedy odbierają kontrolę nad wyglądem.

DC jVideo pozwala osadzić wideo czytelnie, estetycznie i bez chaosu 🧩 — zarówno inline, jak i w formie lekkiego lightboxa.

 

Dla landing page’y z wideo

Landing page z wideo wymaga:

  • kontroli nad pierwszym wrażeniem,

  • lekkiej animacji,

  • braku rozpraszaczy.

Tryb lightbox w DC jVideo sprawdza się tu idealnie:

  • przycisk zamiast ciężkiego embedu,

  • animowana przesłona,

  • skupienie uwagi użytkownika na jednym elemencie 🎬

 

Dla tych, którzy chcą kontrolować UX

DC jVideo jest dla osób, które nie chcą „po prostu wkleić iframe’a”.

Jeśli zależy Ci na:

  • spójnym UX,

  • kontroli animacji,

  • zachowaniu wydajności,

  • czystym DOM bez śmieci po zamknięciu modala,

to ten plugin został napisany właśnie z takim podejściem w głowie 💡

 

Pobieranie i instalacja

DC jVideo możesz pobrać w dwóch miejscach — tak, jak wszystkie nasze narzędzia:

Design Cart (DC) – oficjalna wersja pluginu wraz z opisem i aktualizacjami

Pobierz z Design Cart26

 

GitHub – repozytorium z kodem źródłowym, idealne do podglądu, testów i własnych modyfikacji

Pobierz z GitHub

 

Plugin dystrybuowany jest w formie standardowego pakietu ZIP.

 

Instalacja krok po kroku

Instalacja DC jVideo nie różni się od instalacji innych rozszerzeń Joomla:

  1. Wejdź w Panel administratora Joomla

  2. Przejdź do System → Instalacja → Rozszerzenia

  3. Wgraj plik ZIP pluginu

  4. Po instalacji przejdź do System → Zarządzanie → Wtyczki

  5. Włącz plugin Content – DC jVideo

I to wszystko 👍
Nie ma dodatkowej konfiguracji, nie ma zależności, nie trzeba niczego ręcznie kopiować ani edytować.

Od tego momentu shortcode {video} jest gotowy do użycia w artykułach.

DC jVideo został zaprojektowany tak, aby:

  • instalował się jednym kliknięciem,

  • działał od razu po włączeniu,

  • nie wymagał „rytuałów wdrożeniowych”.

Wklejasz shortcode → wideo działa.
Bez kombinowania.

 

Podsumowanie

DC jVideo powstał z bardzo konkretnej potrzeby:
osadzać wideo w Joomla w sposób nowoczesny, lekki i w pełni kontrolowany — bez walki z edytorem, bez ciężkich iframe’ów i bez narzucanego UX.

Plugin:

  • działa natywnie jako plugin content,

  • oferuje zarówno inline video, jak i lightbox z animacją,

  • obsługuje HTML5, YouTube i Vimeo,

  • nie wymaga jQuery,

  • jest w pełni zgodny z Joomla 5 i 6.

To nie jest kolejny „embed generator”.
To narzędzie dla osób, które chcą decydować, jak wideo zachowuje się na stronie, jak wygląda interakcja użytkownika i jak całość wpisuje się w layout.

Jeśli w Joomla chcesz czegoś więcej niż tylko „wkleić iframe” —
DC jVideo dokładnie to dostarcza. 🎬

Autor: Paweł Nosko