Mil Trucos Blogger

Insertar Videos de YouTube en los comentarios de Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Hace poco publique el truco de Insertar imagenes en los comentarios de Blogger, hoy compartire un truco similar, el de insertar videos de YouTube en los comentarios de Blogger.

Este truco dara más dinamismo a tus comentarios.

Videos de Youtube en comentarios de Blogger


Para añadir este truco a tu blog debes ir a la Edición HTML del blog y buscar la etiqueta </body>, arriba de ella pega el siguiente codigo:

<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:
//


// config:
var oetag = 0;           // see above
var oetagname = "video"; //

, 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>

' : '</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>

Para agregar el video al comentario solo debes poner la URL del video y listo.

Puedes ver el truco en acción en el siguiente blog de pruebas.

Via: Youtube

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

24 Comentarios

  1. Diciembre 14, 2012    

    yo se que es mucho pedir jejeje pero se puede lograr que sea “auto-play”?

  2. Diciembre 14, 2012    

    ¡Mil gracias por complacerme! Abrazos.

    PD. Habría forma de que además de vídeos de YouTube se pueda con cualquier otro, ejemplo, los vídeos que subamos a Facebook?

    • Diciembre 17, 2012    

      Habria que buscar la manera, creo que ya hay un script disponible para ello, lo buscare 😛

      Saludos

  3. Diciembre 15, 2012    

    perdon por la preguntadera y para restringir el tamaño?
    osea que sea de 360 X 203 por ejemplo.

    • Diciembre 17, 2012    

      Pancho son tamaños que vienen por defecto en el script 😕

  4. Diciembre 15, 2012    

    Gracias 😀

  5. Enero 12, 2013    

    gracias me sirvio :alaba:

  6. Enero 14, 2013    
  7. Enero 21, 2013    

    Una buena idea, lo probaré, gracias.

  8. Marzo 27, 2013    

    Perfecto y a la primera… implementado en mis blogs privados.
    Gracias y un saludo.

  9. Mayo 23, 2013    
  10. Mayo 28, 2013    

    ok, lo probé en el otro que dices … pero en el mío no me funciona 🙁

  11. Junio 4, 2013    

    Hola, sigue funcionando con la version 2013 actual? ya que absolutamente todo ha cmabiado y los trucos que hay ya no sirven :'(

    • Junio 5, 2013    

      El truco sigue funcionando, eso si en los comentarios de Google+ si no funciona

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo