Hotové řešení lazy-loadingu YouTube videí

Pokud je na stránce více videí z YouTube, značně to zbrzdí rychlost načítání, případně mohou YouTube videa při načítání zasekávat prohlížení stránky. A uživatel hromadné načtení nejspíš moc neocení, takže se nabízí využít lazy-loading.

Hotové řešení

V článku Lazy loading YouTube videí je popsána tvorba makety YouTube přehrávače v CSS a donačtení skutečného přehrávače při najetí myši.

Co hotové řešení dělá?

Projde na stránce všechny odkazy na YouTube videa s třídou yt a nahradí je atrapou, která při najetí myší donačte originál.

<a class="yt" href="http://www.youtube.com/watch?v=m_t4_6eHFdk">Název videa</a>

Ukázka na webu o hře Saints Row Živá ukázka

CSS

.yt {background: #000 center 65%}
.yt, .yt a {width: 640px; height: 385px; display: block; border: 0;}
.yt a {background: transparent url("yt-control.png") left bottom no-repeat; position: relative; text-decoration: none; color: #fff;}
.yt a span {display: block; width: 96%; position: absolute; top: 0; left: 0; background: #000; color: #fff; font: .8em Arial; padding: 1.2% 2%; opacity: .75;}
.yt a:hover {background-color: transparent}
.yt iframe {border: 0;}

JavaScript

/* Načtení originálu */
function youTube() {
	var ifr = document.createElement("iframe");
	ifr.width = 640;
	ifr.height = 385;
	ifr.src = "http://www.youtube.com/embed/" + getYtCode(this.href);
	this.parentNode.appendChild(ifr);
	this.parentNode.removeChild(this);
}

/* Vytažení kódu videa */
function getYtCode(url) {
    return url.match(/\?v=([A-z0-9_-]*)/)[1];
}

/* Procházení odkazy a přilepení funkčnosti */
var a = document.links;
for (var i = 0; i < a.length; i++) {
  if (a[i].className == "yt") {
    a[i].className = "";
    var div = document.createElement("div");
    div.className = "yt";
    div.style.backgroundImage = "url(http://img.youtube.com/vi/" + getYtCode(a[i].href) + "/sddefault.jpg)";
    a[i].parentNode.insertBefore(div, a[i]);   
    var span = document.createElement("span");
    span.appendChild(document.createTextNode(a[i].innerHTML));
    a[i].innerHTML = "";
    a[i].appendChild(span);
    div.appendChild(a[i]);
    a[i].onmouseover = youTube;
  }
}

Nahrazení starých kódů

Pokud již na stránce jsou videa vložená klasicky značkou <iframe>, provedeme jednoduché nahrazení regulárním výrazem:

<iframe.*embed/([A-z0-9_-]*).*</iframe>

<a class="yt" href="http://www.youtube.com/watch?v=$1">Video</a>