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


24 comentarios

Pancho Gámez · diciembre 14, 2012 a las 5:27 pm

yo se que es mucho pedir jejeje pero se puede lograr que sea «auto-play»?

TVboricuaUSA · diciembre 14, 2012 a las 8:57 pm

¡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?

    Hayder Juvinao · diciembre 17, 2012 a las 12:24 am

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

    Saludos

Pancho Gámez · diciembre 15, 2012 a las 12:07 am

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

Nicasio Dechia · diciembre 15, 2012 a las 8:53 pm

Gracias 😀

Jab95 · enero 12, 2013 a las 5:43 am

gracias me sirvio :alaba:

Aoshi · enero 14, 2013 a las 12:27 am

probando probando!

http://www.youtube.com/watch?v=i33hGu7UewY

Outlook · enero 21, 2013 a las 7:23 pm

Una buena idea, lo probaré, gracias.

Gabriel Bárcena · marzo 27, 2013 a las 1:15 pm

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

Ceciprofe · mayo 28, 2013 a las 11:12 am

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

INDIE DRUGS · junio 4, 2013 a las 12:22 am

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

    Hayder Juvinao · junio 5, 2013 a las 4:58 pm

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

Responder a Hayder Juvinao Cancelar la respuesta

Marcador de posición del avatar

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