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>.
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Devcorner - film w tle</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mb.YTPlayer.min.js"></script>
<script>
$(document).ready(function(){
});
</script>
</body>
</html>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:
<!-- Video -->
<div class="section-video">
<div id="movie" class="movie">
</div>
<div class="video-line">
<div class="container">
<h2>Nasz najnowszy projekt</h2>
<a class="button" href="#">Zobacz więcej</a>
</div>
</div>
<div class="player" data-property="{videoURL:'F100KVk7aZM',containment:'#movie',showControls:false,startAt:10,mute:true,autoPlay:true,loop:true,opacity:1}">
</div>
</div>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:
body {
background:#333333;
}
.section-video {
width: 100%;
position: relative;
border-bottom: 1px solid #212121;
}
.movie {
width: 100%;
height: 100%;
position: absolute;
}
.video-line {
text-align: center;
}
.video-line .container {
padding: 225px 0px;
}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:
.video-line h2 {
font-size: 48px;
margin: 0px 0px 26px;
color: #FFF;
font-weight: 400;
position: relative;
z-index: 2;
}
.video-line a {
position: relative;
color: #FFF;
background-color: #45B6AF;
text-decoration: none;
display: inline-block;
font-size: 13px;
font-weight: 400;
line-height: 24px;
text-transform: uppercase;
margin: 8px 0px;
padding: 12px 30px;
z-index: 2;
}Ważne tutaj jest ustawienie z-index na jakąś wyższą wartość (inaczej tekst nie byłby widoczny).
Możemy wreszcie aktywować wtyczkę:
<script>
$(document).ready(function(){
$('.player').YTPlayer();
});
</script>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:
.video-line::after {
content: "";
z-index: 0;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(30, 30, 30, 0.5) none repeat scroll 0px 0px;
}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.
Chat z Node.js i Socket.io | #2 – Integracja z MongoDB
Przeczytaj artykuł
Jak zrobić karuzelę z owlCarousel
Przeczytaj artykuł
Świetne, dzięki!!!
awesome!