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 :)

Walidacja JS numerów rejestracyjnych w UK

Dziś nieco programistycznie. Prosta funkcja zwracająca true lub false. Pozwala walidować numery rejestracyjne pojazdów w Wielkiej Brytania 

Przyjmowane formaty:

Lt- litera
Lb- liczba

LtLtLbLb LtLt        np: aa99 aa
LtLtLbLbLtLt        np: aa99aa

LtLbLbLb LtLtLt        np: a999 aaa
LtLbLbLbLtLtLt        np: a999aaa

function vrn(string) {
    var string = string;
    if(!string.match(/^[a-z]{2}[0-9]{2}[ ][a-z]{2}$/) &
        !string.match(/^[a-z]{2}[0-9]{2}[a-z]{2}$/) &
        !string.match(/^[a-z]{1}[0-9]{3}[ ][a-z]{3}$/) &
        !string.match(/^[a-z]{1}[0-9]{3}[a-z]{3}$/)
        )
        return false
            else return true;
}

Dziś kolejna lekcja wytrwałości

Że wytrwałym być trzeba, to każdy wie :) Ale szczególnie na początku, drobne nie powodzenie potrafi zniszczyć cały zapał.

Głównym powodem jest brak fundamentów, czyli brak doświadczenia. Brak doświadczenia zarówno jako skuteczny organizator spotkań, ale też i jako nieudacznik. Głupio brzmi, prawda?

Na początku, ucząc się, możemy częściej spodziewać się porażki.
Dzwonimy, gadamy, gadamy... odkładamy telefon i skreślamy osobę z listy potencjalnych partnerów... No nie udało się...

I znów głupie myśli, to bez sensu, nie nadaję się, to nie dla mnie, nie chcę tego robić...
Typowa reakcja wynikająca z braku doświadczenia.

Dzwonimy do partnera, 'wyżalamy mu się', gadamy... Partner chce numer do osobnika, którego właśnie skreśliliśmy. OK.

Po 10 minutach dzwoni i mówi, że mamy umówione spotkanie.
Partner wykazał się doświadczeniem.

Do czego prowadzę?

Nawet jeśli Twojemu partnerowi by się wtedy nie udało, to pewnie nie załamałby się. Zaraz pewnie by dzwonił do kogoś innego, albo właśnie wyjeżdżał na umówione już spotkanie.

TU JEST GŁÓWNA RÓŻNICA

Nie poddawaj się, próbuj dalej. Załóż sobie na oczy klapki, o których niedawno pisałem i dalej dąż do celu.

Przypadek z własnego doświadczenia
Powyższy przykład naprawdę mi się zdarzył. Jako ciekawostkę i motywację na przyszłość powiem, że kilka minut po telefonie od mojego partnera i mnie udało sie umówić spotkanie przez telefon:)

Klapki na oczy i do przodu

Dziś właśnie, gdzieś na forum, wynikło ze mnie takie podejście.

Odnosząc się do mlm, jest to trafne, moim zdaniem. Koniecznie chcę tutaj przytoczyć konia, któremu zakłada się takie klapki na oczy, by nie widział co się dzieje z boku, by nie rozpraszało go otoczenie - by skupił się na celu.

I o to właśnie mi tutaj chodzi odnosząc się do mlm. Czasem trzeba zignorować "dobre rady", przecierpieć tzw. uśmieszki oraz brak wiary wśród bliskich.

Trzeba postawić sobie cel i dążyć do niego.