Results 1 to 1 of 1

Thread: Optimizarea embeddingului YouTube pe website

  1. #1
    Uber Mood johnake's Avatar
    Join Date
    Oct 2007
    Location
    Cum dai coltu', pe dreapta
    Posts
    4,877
    Blog Entries
    4

    Default Optimizarea embeddingului YouTube pe website

    Embedduirea clipurilor de pe YouTube pe websiteuri, indiferent de platformă, face ca loadul pe partea de client să fie mai mare. Asftel, experiența plăcută de navigare are de suferit iar utilizatorul refuză să mai viziteze pagina web sau secțiunea respectivă. De ce se întâmplă asta?

    De fiecare dată când facem embedding la clipuri de pe youtube, clientul/browserul face câte un request pentru a face rendering la playerul video (asta include css/imagini/javascript). Luăm un studiu de caz cum e forumul acesta, mai exact secțiunea "Recomandă o melodie hiphop". Dacă vrem să aflăm cam cât de "grasă" e pagina aflăm că ea are ~ 12.50 MB.

    Dar de ce 12.50? Păi hai să investigăm. În acest exemplu eu folosesc extensia Web Developer Toolbar care m-a ajutat să extrag anumite informații mai in depth:



    După cum observăm cele mai "grase" sunt obiectele, scripturile și css-urile. Dacă dăm expand la fiecare dintre astea, supriză:



    Requesturile către youtube/google sunt cele mai babane. De aceea există un delay mai mare la încărcare paginilor care conțin youtube embedduit.

    Există vreo soluție la această problemă?

    DA!

    Soluția este să nu mai embedduim direct videourile ci să facem un div container cu un thumbnail al videoclipului peste care punem o iconiță de play. Când utilizatorul dă click pe iconița de play se face request la cerința expresă a utilizatorului și se încarcă playerul youtube.

    Cum se face asta mai exact?

    1. Se face un fișiere javascript (.js) care are următorul conținut:

    Code:
    var i,c,y,v,s,n;v=document.getElementsByClassName("youtube");if(v.length>0){s=document.createElement("style");s.type="text/css";s.innerHTML='.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor:hand;cursor:pointer}.youtube .thumb{bottom:0;display:block;left:0;margin:auto;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{filter:alpha(opacity=80);opacity:.8;height:77px;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;background:url("data:image/png;base64,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") no-repeat}';document.body.appendChild(s)}for(n=0;n<v.length;n++){y=v[n];i=document.createElement("img");i.setAttribute("src","http://i.ytimg.com/vi/"+y.id+"/hqdefault.jpg");i.setAttribute("class","thumb");c=document.createElement("div");c.setAttribute("class","play");y.appendChild(i);y.appendChild(c);y.onclick=function(){var a=document.createElement("iframe");a.setAttribute("src","https://www.youtube.com/embed/"+this.id+"?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1");a.style.width=this.style.width;a.style.height=this.style.height;this.parentNode.replaceChild(a,this)}};

    2. În headerul/footerul siteului adăugați linia asta:

    Code:
    <script src="cale/catre/youtube.js"></script>
    3. Acum în loc să folosiți embeddingul clasic de youtube

    Code:
    <iframe src="Link către videoyoutube" height="490" width="640"></iframe>
    veți folosi:

    Code:
    <div class="youtube" id="idul videoului de pe youtube" style="width: 490px; height: 640px;"></div>
    height-ul și width-ul le customizați după bunul plac.
    "Postmodernism is a complete assault on two things: One, it’s an assault on the metaphysical substrate of our culture, and I would say that the metaphysical substrate looks something like a religious substrate, so it’s a direct assault on that; and the second thing it’s an assault on is everything that’s been established since the enlightenment; rationality, empiricism, science.. everything; clarity of mind, dialogue, the idea of the individual, all of that"

    dr. Jordan B. Peterson

  2. The Following 4 Users Say Thank You to johnake For This Useful Post:

    adonisTB (01-15-2015), Angelitta (01-16-2015), clatite (01-26-2015), haifisch (01-15-2015)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •