¿Insertar videos de YouTube ralentiza el blog?

juancho259 · 25 May 2014

Como dije anterior quiero colocar vídeos de youtube en un blog, pero no se que tan beneficioso sea con respecto a la velocidad de carga del blog y sobre todo y a los usuarios les vaya a gustar.

Colocar vídeos de youtube ponen lento el blog?

kanikase · 25 May 2014

Si pero aquí tengo un tutorial para ponerlos mediante un script y solo carguen al hacerles clic :encouragement:

Cargar videos cuando el usuario lo desee - Ayudar Bloggers

juancho259 · 25 May 2014

kanikase dijo:
Si pero aquí tengo un tutorial para ponerlos mediante un script y solo carguen al hacerles clic :encouragement:

Cargar videos cuando el usuario lo desee - Ayudar Bloggers

Bien tio! , ahora mismo lo reviso gracias

---------- Post agregado el 26-may-2014 hora: 03:37 ----------

juancho259 dijo:
Bien tio! , ahora mismo lo reviso gracias

Amigo vi tu código esta muy bueno , quiero insertarlo en mi blog, el problema es que ahí dice como insertar en blogger y yo tengo wordpress:s

Como hago

También vi que tu tienes insertado el código en tu blog, y cuando abri tu blog, senti una velocidad en cargar la pagina.:encouragement:

kanikase · 29 May 2014

juancho259 dijo:
Bien tio! , ahora mismo lo reviso gracias

---------- Post agregado el 26-may-2014 hora: 03:37 ----------

Amigo vi tu código esta muy bueno , quiero insertarlo en mi blog, el problema es que ahí dice como insertar en blogger y yo tengo wordpress:s

Como hago

También vi que tu tienes insertado el código en tu blog, y cuando abri tu blog, senti una velocidad en cargar la pagina.:encouragement:

Ve a header.php, ahi busca </head> y justo arriba de eso, agrega el script:

HTML:

<script>
// YouTube iFrames
 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 .ythumb{bottom:0;display:block;left:0;margin:auto;padding:0;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{filter:alpha(opacity=80);opacity:.8;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;height:77px;background:url(//lh6.googleusercontent.com/-KM0uGaLlhKc/UznnNWfT-wI/AAAAAAAAKS0/Nnz3WwdoLxk/s77/play.png) 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","ythumb");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;a.style.margin=this.style.margin;a.style.border=this.style.border;a.style.display=this.style.display;this.parentNode.replaceChild(a,this)}};
</script>

Y para insertar el video, en la entrada agregas el codigo

HTML:

<div class="youtube" id="ID-VIDEO" style="width:560px; height:315px; margin:0 auto; display:block; border:none"></div>

Y listo, ya lo tendras :encouragement:

pepolini · 29 May 2014

Una pregunta, no se supone que si el vídeo se carga en un iframe, no afecta a la velocidad de carga del sitio?

juancho259 · 29 May 2014

kanikase dijo:

Ve a header.php, ahi busca </head> y justo arriba de eso, agrega el script:

HTML:

<script>
// YouTube iFrames
 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 .ythumb{bottom:0;display:block;left:0;margin:auto;padding:0;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{filter:alpha(opacity=80);opacity:.8;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;height:77px;background:url(//lh6.googleusercontent.com/-KM0uGaLlhKc/UznnNWfT-wI/AAAAAAAAKS0/Nnz3WwdoLxk/s77/play.png) 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","ythumb");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;a.style.margin=this.style.margin;a.style.border=this.style.border;a.style.display=this.style.display;this.parentNode.replaceChild(a,this)}};
</script>

Y para insertar el video, en la entrada agregas el codigo

HTML:

<div class="youtube" id="ID-VIDEO" style="width:560px; height:315px; margin:0 auto; display:block; border:none"></div>

Y listo, ya lo tendras :encouragement:

Bien tio gracias, voy a probarlo, :encouragement:

---------- Post agregado el 29-may-2014 hora: 15:37 ----------

pepolini dijo:
Una pregunta, no se supone que si el vídeo se carga en un iframe, no afecta a la velocidad de carga del sitio?

Me uno a la pregunta

IngresosWeb · 29 May 2014

kanikase dijo:

Ve a header.php, ahi busca </head> y justo arriba de eso, agrega el script:

HTML:

<script>
// YouTube iFrames
 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 .ythumb{bottom:0;display:block;left:0;margin:auto;padding:0;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{filter:alpha(opacity=80);opacity:.8;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;height:77px;background:url(//lh6.googleusercontent.com/-KM0uGaLlhKc/UznnNWfT-wI/AAAAAAAAKS0/Nnz3WwdoLxk/s77/play.png) 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","ythumb");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;a.style.margin=this.style.margin;a.style.border=this.style.border;a.style.display=this.style.display;this.parentNode.replaceChild(a,this)}};
</script>

Y para insertar el video, en la entrada agregas el codigo

HTML:

<div class="youtube" id="ID-VIDEO" style="width:560px; height:315px; margin:0 auto; display:block; border:none"></div>

Y listo, ya lo tendras :encouragement:

Hola, esta muy buena la idea.. pero en Wordpress no me funciona..

lo he instalado tal cual, de diferente maneras pero no me funciona en el post aparece un espacio en blanco donde debería ir el video.. :grumpy:

kanikase · 29 May 2014

IngresosWeb dijo:
Hola, esta muy buena la idea.. pero en Wordpress no me funciona..

lo he instalado tal cual, de diferente maneras pero no me funciona en el post aparece un espacio en blanco donde debería ir el video.. :grumpy:

Intenta creando un archivo .js y en el, metes:

HTML:

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 .ythumb{bottom:0;display:block;left:0;margin:auto;padding:0;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{filter:alpha(opacity=80);opacity:.8;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;height:77px;background:url(//lh6.googleusercontent.com/-KM0uGaLlhKc/UznnNWfT-wI/AAAAAAAAKS0/Nnz3WwdoLxk/s77/play.png) 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","ythumb");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;a.style.margin=this.style.margin;a.style.border=this.style.border;a.style.display=this.style.display;this.parentNode.replaceChild(a,this)}};

y lo subes a tu host, y antes de </head> lo agregas desde el archivo externo:

HTML:

<script type='text/javascript' src='NOMBRE-ARCHIVO.JS'></script>

:encouragement: