Bookmark / Share
RSS Posts
View my profile
Photos
Have you ever wanted someone to be able to add a Youtube video to your own blog in response to a post you wrote about but don't know how to do it? Well now you can in three easy steps. Today I will show you how to do that.
There are a lot of tutorials out there already on how to do this but I found all of them do not display an actual Youtube video as a comment. I had to do a lot of digging around the Internet, and eventually I came across a post on how to do it but it was written in Burmese, on a blog in Mynmar. I can't read Burmese, so I opted to study that Burmese blog's "View Source" page, and I found the following lot of code in it. I added the code to one of my blogs and it worked the first time. Mind you I also had to figure out how to get the Youtube video to actually display because typing in [youtube=the-video-url-goes-here] simply did not work.
However, despite the fact this is a really easy tutorial and it works on newly created blogs, as well as most existing blogs, sometimes the code will not display a video on a blog that has a customised template. Why this happens I do not know. I am still trying to figure that out and trying to get the video comments to display on my other blog Birds of Tenterfield, NSW, Australia. It may have something to do with various scripts clashing or the template itself (of your blog) may have too much code in it. But generally this code will work on the very first attempt when you add it to your blog's template. If it doesn't, and you have followed the instructions below carefully, then you have a problem just like I do with my other blog.
LIVE-DEMO = This site has the code added to it, so if you'd like to test it out add a Youtube video in as a comment to this post. Please keep the video comments respectable and please don't add any graphic or advertising videos. Thanks!
INSTRUCTIONS:
STEP 1: Go to your "Edit Template" to start editing it and find the opening head tag <head>. Directly below it, on the next line, copy and paste in the following code:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
<SCRIPT src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// Embed youtube videos in Blogspot comments by MS-potilas 2012.
// See http://www.ehlar.com/2012/03/blogger-comments-youtube-video.html //
// 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,'"');
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>
Then click on "Save Template".
STEP 2: If you want to add the instructions for adding a Youtube video to your comments section, so visitors can see it all the time, then do the following:
On the same page (Edit HTML) click on the "Expand Widget Template" option box. Hit the "Ctrl" and then the "F" key on your keyboard and paste in this code in the search bar that pops up.
<b:includable id='comment-form' var='post'>
Scroll down a bit and locate:
<p><data:blogCommentMessage/></p>
Directly below that line of code copy and paste in this text below:
To add a Youtube video as a comment type in or copy and paste the code below and replace the video url text with the one you want to add as a comment.<br/>
[video=ADD-ENTIRE-VIDEO-URL-THAT-YOU-VIEW-ON-THE-WATCH-PAGE-ON-YOUTUBE-HERE]<br/>
STEP 3: Then in the search bar copy and paste in this line of code below in order to find it, if applicable:
<b:includable id='threaded-comment-form' var='post'>
Repeat STEP 2 to add the instructions below the <p><data:blogCommentMessage/></p>.
Save your template and you are done.
FOOTNOTE: If, when searching for <p><data:blogCommentMessage/></p> and you see two instances of them within each section along with two instances of an iframe embedded comment form, place the instructions (text) below the second instance of <p><data:blogCommentMessage/></p>.
There are a lot of tutorials out there already on how to do this but I found all of them do not display an actual Youtube video as a comment. I had to do a lot of digging around the Internet, and eventually I came across a post on how to do it but it was written in Burmese, on a blog in Mynmar. I can't read Burmese, so I opted to study that Burmese blog's "View Source" page, and I found the following lot of code in it. I added the code to one of my blogs and it worked the first time. Mind you I also had to figure out how to get the Youtube video to actually display because typing in [youtube=the-video-url-goes-here] simply did not work.
However, despite the fact this is a really easy tutorial and it works on newly created blogs, as well as most existing blogs, sometimes the code will not display a video on a blog that has a customised template. Why this happens I do not know. I am still trying to figure that out and trying to get the video comments to display on my other blog Birds of Tenterfield, NSW, Australia. It may have something to do with various scripts clashing or the template itself (of your blog) may have too much code in it. But generally this code will work on the very first attempt when you add it to your blog's template. If it doesn't, and you have followed the instructions below carefully, then you have a problem just like I do with my other blog.
LIVE-DEMO = This site has the code added to it, so if you'd like to test it out add a Youtube video in as a comment to this post. Please keep the video comments respectable and please don't add any graphic or advertising videos. Thanks!
INSTRUCTIONS:
STEP 1: Go to your "Edit Template" to start editing it and find the opening head tag <head>. Directly below it, on the next line, copy and paste in the following code:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
<SCRIPT src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// Embed youtube videos in Blogspot comments by MS-potilas 2012.
// See http://www.ehlar.com/2012/03/blogger-comments-youtube-video.html //
// 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,'"');
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>
Then click on "Save Template".
STEP 2: If you want to add the instructions for adding a Youtube video to your comments section, so visitors can see it all the time, then do the following:
On the same page (Edit HTML) click on the "Expand Widget Template" option box. Hit the "Ctrl" and then the "F" key on your keyboard and paste in this code in the search bar that pops up.
<b:includable id='comment-form' var='post'>
Scroll down a bit and locate:
<p><data:blogCommentMessage/></p>
Directly below that line of code copy and paste in this text below:
To add a Youtube video as a comment type in or copy and paste the code below and replace the video url text with the one you want to add as a comment.<br/>
[video=ADD-ENTIRE-VIDEO-URL-THAT-YOU-VIEW-ON-THE-WATCH-PAGE-ON-YOUTUBE-HERE]<br/>
STEP 3: Then in the search bar copy and paste in this line of code below in order to find it, if applicable:
<b:includable id='threaded-comment-form' var='post'>
Repeat STEP 2 to add the instructions below the <p><data:blogCommentMessage/></p>.
Save your template and you are done.
FOOTNOTE: If, when searching for <p><data:blogCommentMessage/></p> and you see two instances of them within each section along with two instances of an iframe embedded comment form, place the instructions (text) below the second instance of <p><data:blogCommentMessage/></p>.
twitter
facebook
