Incarca filme Youtube fara codul iframe sau jQuery (SEO)

Cautam recent o solutie pentru situl RobotFX de a incarca filmele tutorial ale acestuia fara a folosi insa codul initial al Youtube (iframe). Cred ca toti webmasterii stiu, sau ar trebui sa stie ca nu este recomandata folosirea iframe-urilor in paginile web. Nu numai ca ingreauneaza incarcarea paginii - deoarece se incarca si pagina din iframe, dar se 'scurge' si un pic din rank-ul paginii.
E simplu de facut cu jQuery si se gasesc nenumarate plugin-uri pentru a incarca filmele Youtube fara a folosi iframe-ul. Insa RobotFX nu are jQuery si nu dorea folosirea acestuia deoarece deja se foloseste de multe alte javascript-uri.
O solutie am gasit prin folosirea unui mic cod javascript si a unor trucuri CSS. Fara a mai lungi vorba, iata solutia:
Codul HTML

<div class="youtube-container"><div class="youtube-player" data-id="ZgEB_SRC9iw"><div><img alt="RobotFX video demonstration" class="youtube-thumb" src="//i.ytimg.com/vi/ZgEB_SRC9iw/hqdefault.jpg"><div class="play-button"></div></div></div></div>

Codul CSS

.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 570px; }
.youtube-player { display: block; width: 100%; padding-bottom: 56.25%; overflow: hidden; position: relative; height: auto; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button {height:318px;width:570px;left: 0px; top:0px; position: absolute; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6jj4SirQ4qs08-aZamQIca1hSW0gpXsSK0QwB_9tsLrNT7u1ewEwi2Xm7w4lQ5bqdTZ8DHTxVU2gmLbVqle6UJ2tRqOt7Qc4bL9kLddFtr2EQJNICm0bxIfS4_IEzOiNyTQz-ZAV6KRc/s1600/download.png") no-repeat; z-index:3;}
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index:99;}
div.play-button:hover {filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1);}

Codul JavaScript

function labnolThumb(e){return'<img alt="RobotFX video demonstration" class="youtube-thumb" src="//i.ytimg.com/vi/'+e+'/hqdefault.jpg"><div class="play-button"></div>'}function labnolIframe(){var e=document.createElement("iframe");e.setAttribute("src","//www.youtube.com/embed/"+this.parentNode.dataset.id+"?rel=0&autoplay=1&autohide=2&border=0&wmode=opaque&controls=1&showinfo=0"),e.setAttribute("frameborder","0"),e.setAttribute("id","youtube-iframe"),e.setAttribute("allowfullscreen","allowfullscreen"),this.parentNode.replaceChild(e,this)}!function(){for(var e=document.getElementsByClassName("youtube-player"),t=0;t<e.length;t++){var o=document.createElement("div");o.innerHTML=labnolThumb(e[t].dataset.id),o.onclick=labnolIframe,e[t].appendChild(o)}}();

Le gasiti si pe JSFiddle si puteti testa vizitand situl RobotFX.

JQuery replace - inlocuieste un caracter/termen cu altul

In paginile web, jQuery poate fi folosit pentru a inlocui un anume caracter (ori termen) cu un altul. Acest lucru se face, bineinteles, local, in browserul vizitatorului paginii. Nu poate fi modificat continutul propriu-zis al paginii, ci doar cum il va afisa navigatorul (Chrome, Internet Explorer etc).
Pentru a inlocui un anume caracter din pagina web va recomand sa folositi jQuery gazduit de Google ori de jQuery; asta pentru a salva putin din banda de internet alocata sitului dvs. JQuery se mai poate insera si de pe siturile Microsoft, CdnJs si JsDelivr.
Dupa ce ati inserat jQuery in pagina sitului copiati codul de mai jos dupa aceasta si modificati termenii/caracterele pe care le doriti inlocuite. In exemplul de mai jos am inlocuit cuvantul agude cu dude.
Astfel, daca textul paginii contine propozitia:

- Tie iti plac agudele?

... aceasta va deveni, dupa incarcarea completa a paginii si rularea codului javascript:

- Tie iti plac dudele?

Exemplu de codul jQuery replace:

<script type='text/javascript'>

//<![CDATA[ 

$(window).load(function(){

$(document).ready(function(){

$('#continut').html($('#continut').html().replace(/\agude/g,"dude"));

});

});

//]]>  

</script>

 In acest exemplu, #continut este id-ul elementului care contine termenul ori caracterul ce trebuie inlocuit. Aceastaq poate fi div, span, p, table s.a.m.d. Exemplu mai jos:
<div id="continut">
- Tie iti plac agudele?
- Nu, nu imi plac deloc.
</div>

Cum se incarci paginile sitului partial, cu jQuery

Ajax & jQuery

Am gasit codul asta pe unul din siturile mai vechi, pe care nu-l mai folosesc de mult timp. L-am testat si, deoarece inca mai functioneaza, m-am gandit ca e bine sa-l public aici, pentru webmasterii care, eventual, vor dori sa-l foloseasca. Inainte de toate, ce face acest cod? ... probabil veti intreba. Ei bine (folosit corect) va incarca, la un click pe un oarecare link de pe pagina ce-l contine, continutul unui anumit element din pagina link-ului pe care ati facut click, INSA in pagina deja deschisa, fara a reincarca deci toata pagina. Este util deoarece va spori viteza de navigare a vizitatorilor sitului si deasemenea va salva banda alocata contului de gazduire web al sitului respectiv.
Voi explica pas cu pas, pentru o mai buna intelegere:

• se dau doua pagini web ale ACELUIASI sit, pagina1.html si respectiv pagina2.html
• pagina1.html contine un link catre a doua pagina, pagina2.html
• ambele pagini contin un DIV sau orice alt element (span, table etc) cu ID-ul ajax-jquery (vezi codul), ce contine, de exemplu, 111111 in prima pagina si 222222 in cea de-a doua
• Adaugati scriptul jquery (gazduit de Google, pentru a salva banda, sau de jquery.com) si codul de mai jos in head-ul paginilor si....
• de fiecare data cand veti page click pe link-ul catre pagina2.html (de pe pagina1.html), in DIV-ul ajax-jquery se va incarca continutul aceluiasi DIV de pe pagina2.html - mai exact, in locul lui 111111 va aparea 222222 fara a se fi incarcat toata pagina

Codul trebuie introdus inainte de head. Menu-linkuri este id-ul div-ului ce contine link-ul catre pagina2.html.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js?ver=1.8.0" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
jQuery(document).ready(function(){
jQuery('#menu-linkuri a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-jquery').html('');
jQuery('#ajax-jquery').load(link+' #ajax-jquery');

});
});
</script>

"Share links" cu jquery, fara AddThis sau ShareThis

Share cu jQuery

In acest articol am sa scriu cum puteti crea un meniu de "share links" asemanator celor oferite de siturile gen AddThis ori Share This (si alte cateva). O scurta explicatie, prin "Share links" ma refer la link-urile ce va trimit catre siturile pe care puteti sa publicati paginile/siturile dvs. favorite, precum Facebook, Twitter, Digg si multe altele. Stiu, nu sunt greu de facut, insa codul meu (de fapt al celor de la Craigslist, de unde l-am imprumutat) este mult mai rapid si nu ingreuneaza incarcarea paginii web care il contine.

Dezavantajul siturilor AddThis, ShareThis, etc, este ca de multe ori scriptul lor se incarca foarte greu.

Asadar, sa trecem la codul propriu-zis. Apropos de cod, sunt necesare librariile jQuery pentru ca acesta sa functioneze; majoritatea siturilor folosesc deja javascriptul jQuery, asa ca probabil puteti sterge linia din acest cod care include jQuery, pentru a nu-l incarca de 2 ori pe aceeasi pagina/site. Deasemenea, puteti modifica acest cod ori aspectul acestuia (stilul CSS) dupa cum doriti si va sfatuiesc si sa descarcati poza cu icoanele siturilor de socializare din <style></style>, s-o reincarcati pe situl dvs. (ori pe contul Flickr, Photobucker, Picasa s.a.m.d.) si s-o folositi pe a dvs. deoarece este posibil sa renunt in viitor la Flickr si sa sterg aceasta poza.

Share links cu jQuery

<style>

div#shareSocial{border:2px #ccc solid;float:right;font-size:x-small;font-family:sans-serif;display:none;background:#FFF;width:10em;margin:7px;padding:7px;}div#shareSocial #sstitle{font-size:small;}div#shareSocial #ssmain{border-top:2px #ccc solid;margin-top:6px;}div#shareSocial #ssGetMore{padding:2px 0 0 20px;}div#shareSocial a{color:#4c4c4c!important;text-decoration:none;background:url(http://farm9.staticflickr.com/8162/7252758694_794ca304f3_b.jpg) no-repeat top left;line-height:16px;display:block;height:16px;border-bottom:1px #eee solid;margin:3px;padding:0 0 0 20px;}div#shareSocial a.more{display:none;}#shareSocial a#delicious{background-position:0 -176px;}#shareSocial a#diigo{background-position:0 -208px;}#shareSocial a#digg{background-position:0 -192px;}#shareSocial a#email{background-position:0 -224px;}#shareSocial a#facebook{background-position:0 -240px;}#shareSocial a#fark{background-position:0 -256px;}#shareSocial a#friendfeed{background-position:0 -304px;}#shareSocial a#mixx{background-position:0 -464px;}#shareSocial a#myspace{background-position:0 -496px;}#shareSocial a#stumbleupon{background-position:0 -704px;}#shareSocial a#propellor{background-position:0 -576px;}#shareSocial a#reddit{background-position:0 -592px;}#shareSocial a#technorati{background-position:0 -752px;}#shareSocial a#twitter{background-position:0 -784px;}div#shareSocial a:hover{background:#eee;}

</style>

<div id="shareSocial">

<div id="sstitle">Share this on: </div>

<div id="ssmain">

<a title="Email" rel="nofollow" href="mailto:?subject=#T#&body=Read this: #U#" id="email">Email</a>

<a title="Diigo" rel="nofollow" target="_blank" class="more" href="http://www.diigo.com/post?url=#U#&amp;title=#T#" id="diigo">Diigo</a>

<a title="Digg" rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=#U#&amp;title=#T#" id="digg">Digg</a>

<a title="delicious" rel="nofollow" target="_blank" href="http://del.icio.us/save?v=5&amp;noui&amp;jump=close&amp;url=#U#&amp;title=#T#" id="delicious">delicious</a>

<a title="Facebook" rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=#U#&t=#T#" id="facebook">Facebook</a>

<a title="Fark" rel="nofollow" target="_blank" class="more" href="http://cgi.fark.com/cgi/fark/farkit.pl?u=#U#" id="fark">Fark</a>

<a title="FriendFeed" rel="nofollow" target="_blank" class="more" href="http://friendfeed.com?url=#U#&amp;title=#T#" id="friendfeed">FriendFeed</a>

<a title="Mixx" rel="nofollow" target="_blank" class="more" href="http://www.mixx.com/submit/story?page_url=#U#" id="mixx">Mixx</a>

<a title="MySpace" rel="nofollow" target="_blank" href="http://www.myspace.com/index.cfm?fuseaction=postto&amp;t=#T#" id="myspace">MySpace</a>

<a title="Propellor" rel="nofollow" target="_blank" class="more" href="http://www.propeller.com/story/submit/?url=#U#&amp;title=#T#" id="propellor">Propellor</a>

<a title="reddit" rel="nofollow" target="_blank" class="more" href="http://reddit.com/submit?url=#U#&amp;title=#T#" id="reddit">reddit</a>

<a title="StumbleUpon" rel="nofollow" target="_blank" class="more" href="http://www.stumbleupon.com/submit?url=#U#&amp;title=#T#" id="stumbleupon">StumbleUpon</a>

<a title="technorati" rel="nofollow" target="_blank" class="more" href="http://technorati.com/faves?add=#U#" id="technorati">technorati</a>

<a title="Twitter" rel="nofollow" target="_blank" href="http://twitter.com/home?status=#U#" id="twitter">Twitter</a>

<div id="ssGetMore">More...</div>

</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){$("#shareSocial").show()

.mouseleave(function(){$("#ssGetMore").show(50);$("#ssmain a.more").hide(50);});$("#shareSocial a").each(function(){h=$(this).attr('href');h=h.replace(/#U#/g,encodeURIComponent(self.location.href));h=h.replace(/#T#/g,encodeURIComponent($("head title").html()));$(this).attr('href',h);}).mouseover(function(){window.status='';return false;});$("#ssGetMore").mouseenter(function(){$("#ssGetMore").hide(50);$("#ssmain a.more").show(50);});});

</script>

In codul de mai sus aveti, in ordinea scrierii, codul CSS ce va permite sa schimbati aspectul casutei cu link-urile de sharing, DIV-ul ce contine link-urile, javascriptul jQuery gazduit de Google (stergeti-l daca il aveti deja inclus in pagina) si inca un script compatibil cu jQuery care extrage link-ul paginii si titlul acesteia, pentru a crea link-urile de sharing.
Atat!
Meniul drop-down cu link-urile de share va aparea precum in poza.