Stiri » cod » css » filme » html » javascript » jquery » plugin » SEO » TUTORIAL » videoclip » youtube » 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
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("http://3.bp.blogspot.com/-GuKcOcYleRc/Vp7q7KfazqI/AAAAAAAAaOg/Gh030spyYj4/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.
Alte Stiri
-
📰 Dr. Virgil Musta, şeful secţiei de Boli Infecţioase de la Spitalul „Victor Babeş” din Timişoara, reia un mesaj al oamenilor și știință și î...
-
📰 Măştile din pânză sunt în continuare la fel de eficiente, chiar şi în faţa noilor mutaţii ale coronavirusului, deoarece modul de transmitere...
-
📰 Trei persoane au fost rănite aseară în urma unui accident de circulație petrecut pe DJ 611, pe teritoriul localității Petrești, județul Dâmb...
-
📰 Persoanele private de libertate se pot vaccina cu prioritate în etapa a treia, alături de angajații din industria HoReCa, bancheri, coafeze...
-
📰 Prețul mediu al unui bilet de avion în 2020 a fost în scădere cu 25% față de 2019, iar rezervările din România în alte țări au scăzut cu 33%...
0 comentarii:
Trimiteți un comentariu
Va rugam nu faceti spam.