Opcje designu Ignite Player
Tutorial

Własny design Player: stwórz swój układ

Chcesz, żeby Player idealnie pasował do designu Twojej strony? Z Ignite to bułka z masłem.

W tym poradniku pokażemy Ci, jak tworzyć własne designy w Ignite. Kolory, branding — spraw, żeby Twój Player wyróżniał się na tle innych. Najlepsze? To super łatwe — bez kodowania i skomplikowanej konfiguracji!

Opcje kolorów do personalizacji Video Player

Krok 1: Dostosuj kolory Player

Po opublikowaniu wideo i przygotowaniu do osadzenia możesz dostosować kolory Player. Oto dostępne opcje:

  • Kolor akcentu: Zmienia kolor przycisku odtwarzania i paska postępu. Powinien to być Twój najbardziej wyrazisty kolor.
  • Kolor tła: Ustawia tło paska menu Player, zapewniając widoczność na każdym wideo.
  • Elementy interfejsu: Pozwala dostosować kolor pozostałych przycisków i tekstu — z wyjątkiem przycisku odtwarzania.

Ważne: Dostępność ma znaczenie! Nasze domyślne kolory zapewniają wysoki kontrast, dzięki czemu Player jest łatwy w obsłudze dla osób z wadami wzroku. Jeśli zmienisz kolory, zadbaj o to, by zachować wysoki kontrast dla lepszej czytelności.

Proporcje obrazu w Video Player

Krok 2: Ustaw proporcje obrazu

Proporcje obrazu to po prostu stosunek szerokości do wysokości wideo. Klasyczny format to 16:9, ale w podejściu „mobile-first" coraz popularniejsze stają się 9:16 i 4:5.

Nasz Player pozwala wybrać spośród popularnych formatów: 16:9, 9:16, 4:5, 4:3, 3:4, 1:1

Możesz też włączyć tryb responsive, który automatycznie dopasowuje Player do rozmiaru kontenera na Twojej stronie.

Dopasowanie wideo w Player konfiguruje się opcją "video fit"

Krok 3: Dopasowanie wideo (Video Fit)

Ustawienie „Video Fit" określa, jak wideo zachowuje się w ramach proporcji Player.

Brzmi skomplikowanie? Ma to znaczenie, gdy Twoje wideo nie pasuje do formatu Player lub gdy chcesz, żeby wypełniło cały obszar odtwarzacza.

Przykład: masz wideo 16:9, ale Player na Twojej stronie jest ustawiony na 1:1.

  • Contain: Całe wideo pozostaje widoczne, ale pojawiają się czarne paski u góry i na dole.
  • Fit: Wideo wypełnia Player, jest wycentrowane, ale przycinane po bokach.

Spójrz na powyższy zrzut ekranu, żeby zobaczyć przykład.

Ocena dostępności (WCAG) naszego designu Video Player

Info: kontrast kolorów i dostępność w Player

Masz pełną kontrolę nad kolorami swojego Player — nie narzucamy żadnych ograniczeń. Jednak zdecydowanie zalecamy uwzględnienie dostępności przy wyborze kolorów.

Domyślnie Player jest zaprojektowany z myślą o dostępności. Aby to zachować, zadbaj o kombinacje kolorów o wysokim kontraście — dla lepszej czytelności i użyteczności.

Aby Ci w tym pomóc, wyświetlamy mały wskaźnik dostępności, który natychmiast informuje o kontraście wybranego koloru.

Poradnik efektywnego zarządzania różnymi designami Player

Twórz i zarządzaj globalnymi designami

Od stycznia 2025 możesz tworzyć i zarządzać globalnymi designami Player. Pozwala to ustawić predefiniowany design raz i łatwo go stosować przy każdej integracji nowych wideo.

Efektywne zarządzanie designami Player

Pełna personalizacja designu i brandingu?

To są opcje personalizacji dostępne w naszym Player. Możesz też korzystać wyłącznie z naszego europejskiego hostingu wideo i zintegrować własny Player.

W takim przypadku wystarczy użyć plików HLS, playlist lub plików MP4, które dostarczamy. To rozwiązanie jest zwykle stosowane w większych projektach webowych wymagających pełnej kontroli nad designem.