Tutorial: Cómo agregar videos de YouTube en los comentarios de Blogger

thejigg0695 Seguir

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:


  • 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
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Excelente comerciante!
Suscripción a IA
Desde
6 Abr 2009
Mensajes
11.444
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

Iota
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
18 Ene 2012
Mensajes
2.038
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
Suscripción a IA
Desde
16 Ago 2010
Mensajes
4.699
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
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
5 Ene 2014
Mensajes
561
:) Hola como estan Excelente aporte ya lo probe y funciona 100% espectacular lo probe en este post al finalizar esta el video : PRUEBA
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba