¿Insertar videos de YouTube ralentiza el blog?

juancho259 Seguir

Préstamo
Mi
SEO
Verificación en dos pasos activada
Desde
1 Abr 2013
Mensajes
3.207
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?
 

juancho259

Préstamo
Mi
SEO
Verificación en dos pasos activada
Desde
1 Abr 2013
Mensajes
3.207
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 ----------

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

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
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

Gamma
Social Media
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
21 Dic 2009
Mensajes
379
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

Préstamo
Mi
SEO
Verificación en dos pasos activada
Desde
1 Abr 2013
Mensajes
3.207
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 ----------

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

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
1 Dic 2011
Mensajes
813
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

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
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:
 
Arriba