close
Abstract colorful bokeh galaxy background – blues and yellows wi

Na pewno wiele razy widziałeś na stronach internetowych film, który służy jako tło do jakiejś sekcji. Najczęściej można się z tym spotkać na stronach typu one page, czyli takich, na których cała treść znajduje się na pojedynczej stronie.

Aby uzyskać taki efekt skorzystamy z wtyczki mb.YTPlayer. Umożliwia ona odtwarzanie filmu z Youtube w tle dowolnego kontenera.

Pracując z tą wtyczką musimy pamiętać o jednej rzeczy: będzie ona działała tylko na serwerze. Jeśli nie masz serwera lokalnego to najprostszym sposobem będzie pobranie XAMPP lub WAMP. Instalacja jest bardzo prosta i ogranicza się do klikania Dalej. W razie problemów z instalacją/korzystaniem z serwera przejdź tutaj.

Wejdź teraz na tą stronę  i klikając Download ZIP pobierz wtyczkę. Z całej paczki interesuje nas plik jquery.mb.YTPlayer.min.js znajdujący się w folderze dist. Aby ten skrypt działał, potrzebna będzie również biblioteka jQuery. Podłączmy oba te skrypty zaraz przed znacznikiem </body>.

W sekcji head umieściłem jeszcze plik reset.css, który resetuje style CSS narzucone przez przeglądarkę oraz style.css, w którym umieścimy nasze style. W body umieszczamy bibliotekę jQuery oraz pobraną wtyczkę. Poniżej umieszczamy jeszcze znaczniki <script>, między którymi aktywujemy później wtyczkę.

Wewnątrz body, powyżej skryptów js dodajmy kod html, w którym skrypt wyświetli film:

Div z klasą section-video służy jako kontener dla całej sekcji z filmem w tle.

Kolejny div z id movie przechowuje odtwarzany film.

Kontener o klasie video-line przechowuje zawartość nad filmem. My przechowujemy w nim jeszcze jeden div, którego użyjemy później.

Div z klasą player wewnątrz data-property przechowuje ustawienia odtwarzanego filmu takie jak:

  • videoURL – identyfikator filmu na Youtube np. https://www.youtube.com/watch?v=F100KVk7aZM
  • containment – id kontenera, który będzie przechowywał film
  • showControls – widoczność kontrolek, my ustawiamy na false (wyłączone)
  • startAt – sekunda, od której rozpoczęty zostanie film
  • mute – ustawione na true wyłącza dźwięk
  • autoPlay – ustawione na true automatycznie włącza film wraz z załadowaniem strony
  • loop – ustawione na true powoduje, że gdy film się skończy to zostanie włączony od początku (i tak w kółko)
  • opacity – przezroczystość filmu, 1 = brak przezroczystości

Ok, nasz HTML jest już gotowy. Dodajmy teraz kilka reguł CSS:

Po pierwsze rozciągamy całą sekcję (section-video) na 100% i ustawiamy jej pozycjonowanie relatywne. Następnie film (movie) otrzymuje wysokość i szerokość równą 100% i pozycje absolutną. Div o klasie container swoim paddingiem determinuje wysokość całego kontenera. Dodajmy teraz kilka stylów do nagłówka i przycisku:

Ważne tutaj jest ustawienie z-index na jakąś wyższą wartość (inaczej tekst nie byłby widoczny).

Możemy wreszcie aktywować wtyczkę:

Na tym etapie wszystko wygląda już dobrze ale jednak czegoś jeszcze brakuje. Pamiętajmy, że w naszym przypadku film służy tylko jako tło i nie powinien odciągać uwagi od zawartości, która jest nad nim. Lekkie przyciemnienie całej sekcji powinno dać ciekawy efekt:

Dodanie tego kodu stworzy nakładkę, która przyciemni całą sekcję. Warto zapamiętać ten fragment, ponieważ przydaje się bardzo często przy przyciemnianiu dowolnego kontenera.

Końcowy efekt możesz zobaczyć tutaj.

Paczkę możesz pobrać tutaj.

Tags : javascriptjquerytłowtyczkayoutube
  • Xavier

    Świetne, dzięki!!!