Nový kód Youtube pre vkladanie (EMBED) videa na stránky

Tak zjednodušený kód (EMBED) pre vkladanie videa z Youtube na vlastné stránky. V podstate je táto zmena skoro zbytočná pretože už súčasný kód funguje aj na zariadeniach bez Flashu (proste Youtube plne funguje aj na stránkach zobrazených na iPade či na iPhone).


Súčasný kód vyzerá nejako takto:

[html]<object width="480" height="385">
<param name="movie" value="http://www.youtube.com/v/2vc3MH-D2Ro&amp;hl=en_US&amp;fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/2vc3MH-D2Ro&amp;hl=en_US&amp;fs=1"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="480" height="385">
</embed>
</object>[/html]

Pokiaľ ho vkladáte do stránok kus od kusu, tak vám to môže byť srdečne jedno. Inak je to už pokiaľ chcete zvýšiť inteligenciu svojho CMS a tento kód si generujete sami tým, že vyextrahujete ID videa a robíte naviac svoje prispôsobenie kódu – napríklad rozmery okienka s videom.
Vyznačím Vám dôležité detaily v tomto kuse kódu:

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/2vc3MH-D2Ro&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2vc3MH-D2Ro&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Tu už vidíte, že údaje sú dvojmo. To vzniklo historicky tým, že „EMBED“ kód pre Flash objekty sa proste musí vkladať takto dvojito kvôli rôznej podpore Flashu v prehliadačoch. Jedni to robia pomocou značky OBJECT a druhé zasa značkou EMBED. Proste typický chaos a zbytočne dlhý kód.
Pokiaľ chcete modifikovať tento kód, tak ste si to v CMSku museli takto nejako uskriptovať sami.

Teraz nový kód:

[html]<iframe class="youtube-player"
type="text/html"
width="640"
height="385"
src="http://www.youtube.com/embed/VIDEO_ID"
frameborder="0">
</iframe>[/html]

Výrazne kratší a evidentne necháva viac priestoru serverom Youtube na manipuláciu s obsahom, ktorý sa do okienka pošle. Môžu prakticky čokoľvek, čo je logicky možné v rámci značky IFRAME urobiť. Nejaký svoj priestor však má aj ten, čo vládne svojmu serveru a vkladá si takéto kódy do neho. Vyznačím to, čo sa dá meniť:

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>

Možno by ste radi vedeli ako uľahčiť vkladanie Youtube videa v diskusnom fóre, prečítajte si to v článku BBcode pre PHPBB na vkladanie videa

Náročnosť skriptovania pre svoje CMS je rovnaká, proste tie isté tri údaje. Pribúda však celkom šikovný class s názvom „youtube-player“, ktorý všetci kóderi s radosťou využijú najmä v prípade systémov, kde môžu kadetade ľudia vkladať obsah a vrátane kódov z Youtube. Plošne môžu zmeniť vlastnosti iframe obmedzené len na videá z Youtube. Doteraz bol vkladaný kód kus od kusu (dalo sa pomôcť obalením kódu divom s vlastnou triedou).
Pre nadšencov blokovačov je to príležitosť – AdBlock pre Firefox vie blokovať aj podľa názvu triedy.

Nemám žiadne informácie, či Youtube túto triedu nepoužíva a či je teda možné svoj vlastný kód upraviť jej vynechaním. Nezostane nič len testovať.
Horšie dopadnú všetci, ktorí nedokážu svoje kódy inovovať. Určite budú aj staré „naveky“ fungovať ale príde čas, kedy začne byť lepšie vkladať video pomocou universal prehrávačov a starý kód je na to hlúpy.

Ako majiteľ videoservera by som sa neopičil po Youtube. Kód je maličkosť, smerovanie svojho servra by som upriamil skôr na podporu videa mimo Flash prehrávačov v prípade, že videá mám na servroch uložené v rozumnom formáte.

Celkovo tieto „tanečky“ okolo kódu Youtube nepovažujem za nič extrémne dôležité – ľudia, čo kódy copypastujú im nerozumejú a programátori buď zareagujú alebo nie bez dôsledkov.

Test

Mali by sa zobraziť videá v okne. Najskôr ide to isté video starým kódom a potom novým. Malo by sa Vám, dúfam zobraziť oboje ale stačí aj jedno.

Starý kód:

Nový kód:

Môže sa Vám ešte páčiť...