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>.
6 comments:
Your Answer
Thanks for contributing an answer to Blogger Tutorials for everyone!
Please make sure your answer is NOT a SPAM comment, as such comments will be deleted.
Provide details and share your research. Avoid statements based solely on opinion; only make statements you can back up with an appropriate reference, or personal experiences.
Comment Options to add to the form below:
Of course, you can add various combinations of the above to your comment as long as you place the ending tags in the right locations.
Features:
To change your text to bold simply type in a left facing arrow then a UPPERCASE letter b then a right facing arrow. Then add your text, followed by typing in a left facing arrow, then type in /B and then a right facing arrow.
To change your text to italics simply type in a left facing arrow then a lowercase letter i then a right facing arrow. Then add your text, followed by typing in a left facing arrow, then type in /i and then a right facing arrow.
To change the colour of your text type in [co="red"]Add your text here[/co] You can change the colour of the text by either typing in the colour's word or by adding a hex colour code that includes the hash symbol.
To add a marquee text type in [ma]Add your text here[/ma]
To add an image or gif type in [im]Add your image or gif URL here[/im]
Of course, you can add various combinations of the above to your comment as long as you place the ending tags in the right locations.
To add a Youtube video as a comment use either one of the two codes below and replace the video url with the one you want to add as a comment.
[video=ADD-ENTIRE-VIDEO-URL-THAT-YOU-VIEW-ON-THE-WATCH-PAGE-ON-YOUTUBE-HERE]
[video=ADD-ENTIRE-VIDEO-URL-THAT-YOU-VIEW-ON-THE-watch?feature=player_detailpage-HERE]
Of course, you can add various combinations of the above to your comment as long as you place the ending tags in the right locations.
Features:
To change your text to bold simply type in a left facing arrow then a UPPERCASE letter b then a right facing arrow. Then add your text, followed by typing in a left facing arrow, then type in /B and then a right facing arrow. To change your text to italics simply type in a left facing arrow then a lowercase letter i then a right facing arrow. Then add your text, followed by typing in a left facing arrow, then type in /i and then a right facing arrow. To change the colour of your text type in [co="red"]Add your text here[/co] You can change the colour of the text by either typing in the colour's word or by adding a hex colour code that includes the hash symbol.To add a marquee text type in [ma]Add your text here[/ma]
To add an image or gif type in [im]Add your image or gif URL here[/im]Of course, you can add various combinations of the above to your comment as long as you place the ending tags in the right locations.
To add a Youtube video as a comment use either one of the two codes below and replace the video url with the one you want to add as a comment.[video=ADD-ENTIRE-VIDEO-URL-THAT-YOU-VIEW-ON-THE-WATCH-PAGE-ON-YOUTUBE-HERE]
[video=ADD-ENTIRE-VIDEO-URL-THAT-YOU-VIEW-ON-THE-watch?feature=player_detailpage-HERE]
Subscribe to:
Post Comments (Atom)
Scrollbox codes
<a target='_blank' title='DON'T TOUCH MY PHONE' href='ADDYOURURLHERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL7STOhgP_MlwszrcyPkDHVQ2MbrK0IqnhEWeqUdmPh5QFbqdXvlGmh-RN3ZVfPR48rBipZUVKAGy1mlpuL1Q1EoHubFlNPI25TJ54PvPhZSqHuM42AYIuIhtbSg-F40KHKgW08aL29bar/s320/58298-dont-touch-my-phone.png' border='0'/></a>
This free script provided by
JavaScript Kit
twitter
facebook
This comment has been removed by a blog administrator.
ReplyDeleteNice Post..Thanks
ReplyDeleteecommerce website hosting
I'm glad you liked the post, Nancy. Silly me forgot to add the instructions into the comments section on this site but now I have added it. I tested it by adding a Youtube video as a random comment below.
Delete[video=https://www.youtube.com/watch?v=MWT51807cyM]
ReplyDeleteThis is a test video comment.
Good Publish.. Many thanks
ReplyDeletee-commerce internet hosting.
elo boost
Cheap Fifa 14 Coins
Good post nice info..
ReplyDeleteEcommerce Website Developers Mumbai