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 adauga un cod HTML a.i. sa apara numai in articole (postari) pe Blogger

HTML in articolele Blogger

Pentru a adauga un cod HTML in template-ul Blogger a.i. acesta sa apara numai in postari/articole, va trebui sa folositi urmatorul cod:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

...codul dvs HTML...

</b:if>

Deschideti template-ul pentru a-l edita Template >  Edit HTML > Proceed si faceti un click pe Expand Widget Templates. Cautati linia de cod <data:post.body/> si adaugati codul de mai sus deasupra acesteia, pentru a aparea in continutul articolului (ca de exemplu reclama eTarget din acest articol) sau dedesubtul acestei linii daca doriti sa integrati si sa afisati codul HTML dupa articol (de exemplu, comentariile Facebook de dedesubtul acestui articol).
Retineti ca pot fi <data:post.body/>, atat pentru versiunea web a blogului cat si pentru cea pentru mobile.