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.
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,'"');
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»?
Alcarcos00 · diciembre 14, 2012 a las 6:54 pm
Si
http://youtu.be/_xuMwfUqJJM?t=1s
Alcarcos00 · diciembre 14, 2012 a las 6:55 pm
si se puede
http://youtu.be/_xuMwfUqJJM?t=1s
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.
Hayder Juvinao · diciembre 17, 2012 a las 12:32 am
Pancho son tamaños que vienen por defecto en el script 😕
Nicasio Dechia · diciembre 15, 2012 a las 8:53 pm
Gracias 😀
Hayder Juvinao · diciembre 17, 2012 a las 12:37 am
Nicasio gracias por tu comentario 😛
Jab95 · enero 12, 2013 a las 5:43 am
gracias me sirvio :alaba:
Hayder Juvinao · enero 13, 2013 a las 12:51 am
De nada amigo 😛
Aoshi · enero 14, 2013 a las 12:27 am
probando probando!
http://www.youtube.com/watch?v=i33hGu7UewY
Hayder Juvinao · enero 14, 2013 a las 1:11 am
Aoshi yo no uso este truco en Mil Trucos Blogger, puedes probarlo aqui en este otro blog
http://pruebaplantilla-2012.blogspot.com/2012/09/lorem-ipsum-7.html
Outlook · enero 21, 2013 a las 7:23 pm
Una buena idea, lo probaré, gracias.
Hayder Juvinao · enero 21, 2013 a las 9:46 pm
Gracias amigo por tu comentario.
Outlook · enero 22, 2013 a las 11:15 am
no hay de que !!!
tienes cosas muy guapas aquí,
saludos.
Hayder Juvinao · enero 23, 2013 a las 7:23 pm
Saludos amigo 🙂
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 23, 2013 a las 1:31 pm
http://www.youtube.com/watch?v=ezJ7OzaKWv0
Hayder Juvinao · mayo 23, 2013 a las 5:07 pm
No tengo instalado el script aqui
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 🙁
Hayder Juvinao · junio 5, 2013 a las 5:00 pm
En el otro blog si 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