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.
0 comentarii:
Trimiteți un comentariu
Va rugam nu faceti spam.