Advertisement
mspotilas

Embed youtube videos in Blogspot comments

Mar 4th, 2012
2,095
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
  2. <script type='text/javascript'>
  3. //<![CDATA[
  4. // Embed youtube videos in Blogspot comments by MS-potilas 2012.
  5. // See http://yabtb.blogspot.com/2012/03/embed-youtube-in-blogger-comments.html
  6. //
  7. // if oetag=0, just use video urls like:
  8. //           http://www.youtube.com/watch?v=12345678901
  9. //           surrounded by white space (video tag can be used, too)
  10. // if oetag=1 (for nerdy blogs?), use syntax:
  11. //           [video=http://www.youtube.com/watch?v=12345678901]
  12. // config:
  13. var oetag = 0;           // see above
  14. var oetagname = "video"; // [video=zzz], maybe you like "embed" or "youtube" more?
  15. var oelazy = -1; // -1 detect, 0 = normal, 1 = lazy (needs lazy load hack)
  16. //
  17. function oe_loadscript(filename) {
  18.   var scr=document.createElement('script');
  19.   scr.setAttribute("type","text/javascript");
  20.   scr.setAttribute("src",filename);
  21.   document.getElementsByTagName("head")[0].appendChild(scr);
  22. }
  23. function oe_jumptohash() { // reposition to anchor
  24.   window.scrollTo(0, $("#"+window.location.hash.replace(/^#/, "")).offset().top);
  25. }
  26. var oe_tid;
  27. var oe_elems = {};
  28. //
  29. function oembed_callback(response) {
  30.   var resp = response;
  31.   revurl = resp.url.split("").reverse().join("");
  32.   html = oe_elems[response.callID].html();
  33.   ee = $(resp.html);
  34.   w = parseInt(ee.attr("width"));
  35.   h = parseInt(ee.attr("height"));
  36.   if(oelazy==1) { // convert to lazy load
  37.     src = ee.attr("src");
  38.     src += ((src.indexOf("?")==-1) ? "?" : "&") + "autoplay=1";
  39.     ee.attr("src", src);
  40.     ee.attr("style", "vertical-align:top;");
  41.     htm = $("<div/>").append(ee).html();
  42.     htm = $('<div/>').text(htm).html().replace(/"/g,'&quot;');
  43.     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>';
  44.   }
  45.   htmlx = html.replace(new RegExp("\\[" + oetagname + "="+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+"\\]"), " " + resp.url + " ");
  46.   htmlx = htmlx.replace(new RegExp("\\[" + oetagname + "="+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+" \\]"), " " + resp.url + " ");
  47.   htmlx = htmlx.replace(new RegExp('"'+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+'"', "g"), '"'+revurl+'"');  // trick to preserve href="url"
  48.   htmlx = htmlx.replace(new RegExp(resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")), '<div style="height:'+h+'px;" class="oembed youtube">'+resp.html+'</div>')
  49.   htmlx = htmlx.replace(new RegExp('"'+revurl.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+'"', "g"), '"'+resp.url+'"');  // trick to preserve href="url"
  50.   if(html != htmlx) {
  51.     oe_elems[response.callID].html(htmlx);
  52.     if(window.location.hash.replace(/^#/, "").length > 0) {
  53.       if(oe_tid) window.clearTimeout(oe_tid);
  54.       oe_tid = window.setTimeout("oe_jumptohash()", 1000);
  55.     }
  56.   }
  57. }
  58. function oembed_yt(url, width, callID) {
  59.   src = "http://oembed-js.appspot.com/?url=" + encodeURIComponent(url) + "&callback=oembed_callback&callID=" + encodeURIComponent(callID);
  60.   if(width) src = src + "&maxwidth=" + width + "&maxheight=" + width;
  61.   oe_loadscript(src);
  62. }
  63. $(document).ready(function() {
  64.  det=$('<div class="youtube-lazy-link-div" />');
  65.  $("body").append(det);
  66.  if(det.css("position")=="absolute") {
  67.   if(oelazy != 0) oelazy=1;
  68.  }
  69.  else oelazy = 0;
  70.  det.remove();
  71.  window.setTimeout(function() {
  72.   var callID=0;
  73.   $(".comment-content,.comment-body,.comment-body-author").each(function() {
  74.     html = " " + $(this).html() + " ";
  75.     if(oetag)
  76.       matches = html.match(new RegExp("\\["+oetagname+"=(https?:\\/\\/[^\\s<\\/]*youtu\\.*be[^\\]]+)", "g"));
  77.     else
  78.       matches = html.match(/([>\s^]|\[\w+=)(https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+)/g);
  79.     if(matches && matches.length) {
  80.       for(var i=0;i<matches.length;i++) {
  81.         url = matches[i].match(/https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+/);
  82.         oe_elems[callID] = $(this);
  83.         oembed_yt(url, $(this).width(), callID++);
  84.       }
  85.     }
  86.   });
  87.  }, 500);
  88. });
  89. //]]>
  90. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement