Lazy loading YouTube videí

Máme-li na stránce více videí vložených například pomocí <iframe> z YouTube, značně to načítání zpomalí. Jeden takový <iframe> je cca 7 HTTP požadavků a 0,5 MB dat, což může načítání webu na mnoho tisíců milisekund otrávit.

Řešení

Co takhle místo <iframe> zobrazit obrázek videa, přidat nějaké atrapy ovládacích prvků skutečného přehrávače – a ten zobrazit až po najetí myší (onmouseover)?

Náhledy

Obrázek (náhled) videa lze získat překvapivě snadno. Různé varianty obrázku videa se nacházejí na jednotných URL, kam stačí zadat jenom kód videa (to je část za wathc?v=: youtube.com/watch?v=m_t4_6eHFdk).

Náhledy pomocí API

Alternativní možnost k těmto adresám je získání URL obrázků pomocí YouTube API. Těžko ale soudit, co bude trvanlivější… Nicméně obrázky jsou zatím alespoň jednodušší na realisaci.

Živá ukázka a řešení

V HTML a kaskádových stylech se vytvoří atrapa. JavaScript ji potom prohodí za skutečný přehrávač videa.

HTML by mohlo vypadat takto:

<div class='yt' style='background: #000 url("http://img.youtube.com/vi/m_t4_6eHFdk/sddefault.jpg") center 65%'>
	<a onmouseover='yt(this)' href='http://www.youtube.com/watch?v=m_t4_6eHFdk'><span>Název videa</span></a>
</div>

V CSS se potom vytvoří atrapa ovládacího prvku (pomocí obrázku).

Naposicuje se dolů a název videa ve <span>u v odkazu zase nahoru.

Nakonec JavaScript zajistí, aby se v div.yt vytvořil <iframe> s videem a atrapa v podobě odkazu zmizela.

function yt(video) {
	var ifr = document.createElement("iframe");
	ifr.width = 640;
	ifr.height = 385;
	ifr.src = video.href.replace("watch?v=", "embed/");
	video.parentNode.appendChild(ifr);
	video.parentNode.removeChild(video);
}

Automatisace

Asi by se nikomu nechtělo vkládat ručně výše uvedené HTML, proto jsou dvě možnosti:

1. Na straně serveru při vložení URL na YouTube ji nahradit upravenou HTML skořápkou. (Nahrazení by nemělo být v žádném případě trvalé.)

2. Vkládat YT videa jako běžné odkazy, JavaScriptem je najít, doplnit jim skořápku a navěsit funkci yt.

   Hotové řešení

Kromě toho by serverový skript mohl zajišťovat stažení náhledového obrázku z YT na vlastní server.