Tutorial: Videos de Youtube en comentarios Blogger

thejigg0695

Dseda
Redactor
Verificación en dos pasos desactivada
Desde
7 Abr 2010
Mensajes
1.159
Bueno hace mucho yo me preguntaba esto y ahora en un blog escontre la solución y vengo a compartirselas para que lo implementen en su blog.

Bueno empesemos.

1ro.- Buscamos </body>
2do.- Arriba de </body> pegamos el siguiente codigo
Insertar CODE, HTML o PHP:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// if oetag=0, just use video urls like:
//           http://www.youtube.com/watch?v=12345678901
//           surrounded by white space (video tag can be used, too)
// if oetag=1 (for nerdy blogs?), use syntax:
//           [video=http://www.youtube.com/watch?v=12345678901]
// config:
var oetag = 0;           // see above
var oetagname = "video"; // [video=zzz], maybe you like "embed" or "youtube" more?
var oelazy = -1; // -1 detect, 0 = normal, 1 = lazy (needs lazy load hack)
//
function oe_loadscript(filename) {
  var scr=document.createElement('script');
  scr.setAttribute("type","text/javascript");
  scr.setAttribute("src",filename);
  document.getElementsByTagName("head")[0].appendChild(scr);
}
function oe_jumptohash() { // reposition to anchor
  window.scrollTo(0, $("#"+window.location.hash.replace(/^#/, "")).offset().top);
}
var oe_tid;
var oe_elems = {};
//
function oembed_callback(response) {
  var resp = response;
  revurl = resp.url.split("").reverse().join("");
  html = oe_elems[response.callID].html();
  ee = $(resp.html);
  w = parseInt(ee.attr("width"));
  h = parseInt(ee.attr("height"));
  if(oelazy==1) { // convert to lazy load
    src = ee.attr("src");
    src += ((src.indexOf("?")==-1) ? "?" : "&") + "autoplay=1";
    ee.attr("src", src);
    ee.attr("style", "vertical-align:top;");
    htm = $("<div/>").append(ee).html();
    htm = $('<div/>').text(htm).html().replace(/"/g,'&quot;');
    resp.html = '<a href="'+resp.url+'" class="youtube-lazy-link" style="width: '+w+'px; height: '+h+'px; background: #000 url('+resp.thumbnail_url+') center center no-repeat;" onclick="$(this).replaceWith(\''+htm+'\');return false;"><div style="width:'+(w-4)+'px;height:'+(h-4)+'px;" class="youtube-lazy-link-div"></div><div class="youtube-lazy-link-info"><b>'+resp.title+(resp.playlist ? '</b> [playlist]' : '</b>')+'<br /><small>by '+resp.author_name+'</small></div></a>';
  }
  htmlx = html.replace("[" + oetagname + "="+resp.url+"]", " " + resp.url + " ");
  htmlx = htmlx.replace("[" + oetagname + "="+resp.url+" ]", " " + resp.url + " ");
  htmlx = htmlx.replace('"'+resp.url+'"', '"'+revurl+'"');  // trick to preserve href="url"
  htmlx = htmlx.replace(resp.url, '<div style="height:'+h+'px;" class="oembed youtube">'+resp.html+'</div>')
  htmlx = htmlx.replace('"'+revurl+'"', '"'+resp.url+'"');  // trick to preserve href="url"
  if(html != htmlx) {
    oe_elems[response.callID].html(htmlx);
    if(window.location.hash.replace(/^#/, "").length > 0) {
      if(oe_tid) window.clearTimeout(oe_tid);
      oe_tid = window.setTimeout("oe_jumptohash()", 1000);
    }
  }
}
function oembed_yt(url, width, callID) {
  src = "http://oembed-js.appspot.com/?url=" + encodeURIComponent(url) + "&callback=oembed_callback&callID=" + encodeURIComponent(callID);
  if(width) src = src + "&maxwidth=" + width + "&maxheight=" + width;
  oe_loadscript(src);
}
$(document).ready(function() {
 det=$('<div class="youtube-lazy-link-div" />');
 $("body").append(det);
 if(det.css("position")=="absolute") {
  if(oelazy != 0) oelazy=1;
 }
 else oelazy = 0;
 det.remove();
 window.setTimeout(function() {
  var callID=0;
  $(".comment-content,.comment-body,.comment-body-author").each(function() {
    html = " " + $(this).html() + " ";
    if(oetag)
      matches = html.match(new RegExp("\\["+oetagname+"=(https?:\\/\\/[^\\s<\\/]*youtu\\.*be[^\\]]+)", "g"));
    else
      matches = html.match(/([>\s^]|\[\w+=)(https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+)/g);
    if(matches && matches.length) {
      for(var i=0;i<matches.length;i++) {
        url = matches[i].match(/https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+/);
        oe_elems[callID] = $(this);
        oembed_yt(url, $(this).width(), callID++);
      }
    }
  });
 }, 500);
});
//]]>
</script>

3ro.- Guardamos Plantilla y podemos probar. :encouragement:

Pero como debo colocar los videos en el formulario de comentarios?

Muy sencillo, lo puedes hacer de tres formas:


  • Poniendo la URL de YouTube, Ejemplo ([B]http://www.youtube.com/watch?v=IDVIDEO[/B])

  • Colocando el Short URL de YouTube, Ejemplo ([B]http://youtu.be/IDVIDEO[/B])

  • Tambien con una etiqueta que es esta [video=http://www.youtube.com/watch?v=IDVIDEO]

Bueno y eso es todo, espero les sea funcional este tutorial
Saludos:encouragement:
 

Carlos Arreola

Admin
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.358
Tema aprobado y agregado al listado de tutoriales [MENTION=1978]thejigg0695[/MENTION]
 

cristianpanama

Gamma
Verificación en dos pasos desactivada
Desde
13 Dic 2011
Mensajes
175
Perdonad pero para que nos sirve este tutorial, es que no soy experto en la materia.
Gracias

Enviado desde mi Samsung Galaxy S3 usando Tapatalk
 

thejigg0695

Dseda
Redactor
Verificación en dos pasos desactivada
Desde
7 Abr 2010
Mensajes
1.159
el formulario de Blogger (Blogspot) no permite poner videos en los comentarios y con este script es posible poner videos de youtube.
 

cristianpanama

Gamma
Verificación en dos pasos desactivada
Desde
13 Dic 2011
Mensajes
175
el formulario de Blogger (Blogspot) no permite poner videos en los comentarios y con este script es posible poner videos de youtube.

Vale gracias por contestar, muy bueno.

Enviado desde mi Samsung Galaxy S3 usando Tapatalk
Visita : info-noti-web.com
Tu Web de información y Tecnología del día a día.
 

Carlos Lozano

Zeta
Verificación en dos pasos desactivada
Desde
18 Ene 2012
Mensajes
1.624
muy bueno y util yo la prebe en uno de mis blogs de prueba y va bien,ya lo aplicare en unos de mi blogs de videos ,gracias por el aporte :)
 

Caymans

1
Ómicron
SEO
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
16 Ago 2010
Mensajes
4.702
si bien parece que alguien está reviviendo bastante estos tutoriales, que bueno esta vez que lo hizo, no sabia que se podia hacer y si bien yo no le daré utilidad, muchos podrán hacerlo ya que es un muy buen complemento!
 

davidtorresruiz

Delta
Programador
Verificación en dos pasos desactivada
Desde
5 Ene 2014
Mensajes
554
:) Hola como estan Excelente aporte ya lo probe y funciona 100% espectacular lo probe en este post al finalizar esta el video : PRUEBA
 

ego2k

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
19 Jun 2013
Mensajes
242
Muy buen tuto.. se agradece :p8:
 

ceedeno

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
3 Ene 2014
Mensajes
322
Interesante, no pensaba que esto era posible
 

NicoSan

Beta
SEO
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
20 Feb 2014
Mensajes
117
Gracias por el dato!
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba