Dostosowanie okna video z Youtube, na naszej stronie

Cały świat wrócił do 'ramek wbudowanych', czyli iframe. Nawet tacy giganci jak facebook, Youtube. Dlaczego nie? Wideo z Youtube o wiele łatwiej umieścić przez ramkę.

Jak umieścić wideo z youtube na stronie, wiedzą chyba nawet Ci mniej zaawansowani, do których kieruję ten post. Nie każdy jednak wie, jak wiele parametrów możemy ustawić.

Próbując udostępnić poprzez umieszczenie, korzystając z mini kreatora firmowego, możemy ustalić tylko szerokość ramki, czy po zakończeniu mają się pokazywać inne filmowe propozycje, czy użyć https.

Zaobserwuj jak zmienia się ten zaznaczony kod w ramce, podczas zmiany poszczególnych opcji.

Wideo z youtuba to nic innego niż ramka iframe z odpowiednio spreparowanym kodem.

http://www.youtube.com/embed/8SbUC-UaAxE - to przykładowy adres filmu. Uruchom go sobie bezpośrednio w przeglądarce. Zobaczysz okno youtube w rozmiarze 100% X 100%, przez co potem obraz automatycznie dopasuje się do Twojej ramki.

Zaznaczony wyżej na czerwono kod, to ID filmu. Każdy film na YT ma oczywiście swoje unikalne ID i jest ono widoczne zawsze w adresie strony, w różnej postaci. Łatwo można go jednak wyciągnąć, chociażby ręcznie.

W embedowej wersji, ID umieszczamy zaraz po http://www.youtube.com/embed/..

Przykładowa ramka może zatem wyglądać tak:

<iframe allowfullscreen="" frameborder="0" height="360" src="http://www.youtube.com/embed/8SbUC-UaAxE?rel=0" width="480"></iframe>

Co da nam taki efekt:



Jak można zauważyć, na końcu linka, czyli wartości atrubutu SRC: http://www.youtube.com/embed/8SbUC-UaAxE?rel=0
Dodano parametr GET rel=0, który oznacza, że po zakończeniu filmu, nie będą wyświetlane inne propozycje do obejrzenia.

Dodając kolejne, specjalne zmienne możemy modyfikować nieco zawartość naszej ramki.

Kilka z nich warto używać, chociażby aby dostosować wyświetlane wideo do naszej strony i potrzeb.

autohide

autoplay

color

playlist

rel

showinfo

start

theme

Autohide, czyli ukrywanie nawigacje youtube. Przyjmuje vartości

0

1

2

Kiedy ustawimy 0, pasek nawigacyjny będzie cały czas widoczny, gdy 1, pasek zniknie chwilę po Twojej aktywności. Wartość 2 jest domyślna, i pasek nawigacji ukrywa się po rozpoczęciu odtwarzania wideo.

Parametr dodany do adresu będzie miał postać np:

autohide=0

Autoplay, przydatna funkcja, jak sama nazwa wskazuje umożliwia nam włączenie lub wyłączenie auto odtwarzania. Przypisując wartość 1, filmy będą automatycznie się odtwarzały po załadowaniu strony

Ciekawy jest również parametr color, który przyjmuje wartości red oraz white i określa pasek postępu odtwarzanego filmu

Wygląd modyfikuje nam również parametr theme. Określa on kolor dolnego paska nawigacji. Domyślnie jest on ciemny/szary a my możemy go zmodyfikować na jasny, przypisując wartość light. Analogicznie, domyślnie ciemny motyw to dark

Czyli do linku dodajemy:

theme=light

lub

theme=dark

Sprytny parametr start pozwala nam odtworzyć wideo w dowolnej sekundzie jego trwania, czyli:
strart=45 zacznie nam odtwarzać film od 45 sekundy, a start=85 zacznie odtwarzanie od minuty i 25 sekund

W odtwarzaczy możemy również ukryć, domyślnie widoczne na górze okna, informacje o wideo. Służy do tego zmienna showinfo. Wystarczy zatem mały zabieg:

showinfo=0

I na koniec jeszcze jeden, dający spore możliwości parametr: playlist. Wiedząc już co to są ID wideo na youtube :) i potrafiąc je wyodrębnić, możemy stworzyć sobie na stronie playlistę wideo i zdefiniować, jakie filmy po kolei chcemy odtwarzać. Po parametrze playlist= wymieniamy kolejno, po przecinku ID następnych wideo

Moje wideo może teraz wyglądać tak:




Albo tak:



Wklejając taki kod:
<iframe allowfullscreen="" frameborder="0" height="390px" src="http://www.youtube.com/embed/8SbUC-UaAxE?rel=0&theme=light&color=white&showinfo=0&controls=0" width="100%"></iframe>

A jeśli nudzi Cię czekanie na ładujące się wideo, kliknij na okno filmu, potem strzałką w prawo i do góry. Snake tak Cię wciągnie, że zapomnisz o filmie :)