Mr ThangMing: Embed

<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ Comments Box မွာ  Embed YouTube Videos မ်ားထည့္လုိ႔ရေအာင္ လုပ္နည္းေလးပါ။ က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့ေတြမွာေတာ့ သုံးတဲ့ သူမရွိသေလာက္ပါပဲလုိ႔ေျပာနုိင္ပါတယ္။ မႀကဳိက္ၾကတာလာေတာ့ မသိပါ။ ႀကဳိက္တဲ့ ဘေလာ့မိတ္ေဆြမ်ားရွိရင္ အလြယ္တကူ လုပ္လုိ႔ရေအာင္ တင္ေပးလုိက္တာပါ။ ေအာက္မွာ Demo(နမူနာ) သြားၾကည့္ လုိ႔ရေအာင္ Link{လင့္(ခ္)} နွင့္ တကြ လုပ္နည္းနဲ႔ လုိအပ္တဲ့ Cond ေတြလည္းေပးထားပါတယ္။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DL8fnn4wZQC5J8IO0iybsfTI28Lt8oaad0bDVExCTNynbaJovy1u_ZfSxjz9Br7qDWuFI7fXK2jTz2rajLOMNUzFNfI23n0CnV54durwbx1VNHJ_94qCLb1IcuvO_54pXMoDGSzfdgw/s1600/EMBEDY~1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DL8fnn4wZQC5J8IO0iybsfTI28Lt8oaad0bDVExCTNynbaJovy1u_ZfSxjz9Br7qDWuFI7fXK2jTz2rajLOMNUzFNfI23n0CnV54durwbx1VNHJ_94qCLb1IcuvO_54pXMoDGSzfdgw/s1600/EMBEDY~1.JPG" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://mtmdemo.blogspot.com/2013/04/how-to-create-a-new-blogger.html" style="font-size: 100%;" target="_blank" title="Go Check Out The Demo Live.. "><img height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq1T28UHnYJ5c-Ex3Ny43eJnOtCKu7-B5i89oMD567ndzdTkPp1fe3cKRx0wML9n1gBEjL1GQKWl3FDQaMGkarx4DR-ElThuqLOrbFtLAVoZiKijVBkhJJppCP25N1e44COnxUJle_gXw/s1600/live-demo-icon.jpg" width="180" /></a></div>
၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a>
<br />
<br />
၂။ Template<br />
Cond ေပါင္းထည့္ရမွာ စိတ္မခ်ပါက <a href="http://mrthangming.blogspot.com/2012/11/how-to-backuprestore-your-blogger.html" target="_blank" title="Take a Backup/Restore of your template">Backup/Restore</a> အရင္လုပ္ေပးသင့္ပါတယ္။<br />
၃။ Edit HTMl<br />
<br />
၄။ Proceed<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxz1mFb7tWnisQzytpbnDy2NrH9Dmka3QObLAWIY1cFSrFkwfvK7cABckjTKMYaqw54Yx5Ud3I8ToQgTOU-fThL_0FBlc55JMkOYQVVDngmfJzfro5eliRa-DsNfztEDi622juCivvcYI/s1600/box.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxz1mFb7tWnisQzytpbnDy2NrH9Dmka3QObLAWIY1cFSrFkwfvK7cABckjTKMYaqw54Yx5Ud3I8ToQgTOU-fThL_0FBlc55JMkOYQVVDngmfJzfro5eliRa-DsNfztEDi622juCivvcYI/s200/box.png" width="200" /></a>၅။ ေအာက္က  Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<br />
<pre class="cpp" name="code"></head>

</pre>
<br />
၆။ ေတြ႔ၿပီးဆုိရင္ </head> ရဲ႕ အေပၚမွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

//<![CDATA[

// Embed youtube videos in Blogspot comments by Mr-ThangMing 2012.

// See http://mrthangming.blogspot.com/2013/04/How-To-Add-Embed-YouTube-Videos-In-Blogger-Comments-Box.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,'&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> [playlist]' : '</b>')+'<br /><small>by '+resp.author_name+'</small></div></a>';

}

htmlx = html.replace(new RegExp("\\[" + oetagname + "="+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+"\\]"), " " + resp.url + " ");

htmlx = htmlx.replace(new RegExp("\\[" + oetagname + "="+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+" \\]"), " " + resp.url + " ");

htmlx = htmlx.replace(new RegExp('"'+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+'"', "g"), '"'+revurl+'"');  // trick to preserve href="url"

htmlx = htmlx.replace(new RegExp(resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")), '<div style="height:'+h+'px;" class="oembed youtube">'+resp.html+'</div>')

htmlx = htmlx.replace(new RegExp('"'+revurl.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+'"', "g"), '"'+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>

</pre>
<br />
၇။ ထည့္ၿပီးရင္ Save Template Button ေလးကုိ နုိပ္ေပးလုိက္ပါ။<br />
<br />
<span style="font-size: large;"><b>မွတ္ခ်က္။   ။ </b></span>Blog Comment Box မွာ [video=ဤေနရာမွာ မိမိႀကဳိက္တဲ့ YouTube လင့္(ခ္) ထည့္ပါ] ဆုိၿပီထည့္ရပါမယ္။<br />
<br />
<pre class="cpp" name="code"> [video=ဤေနရာမွာ မိမိႀကဳိက္တဲ့ YouTube လင့္(ခ္) ထည့္ပါ]

</pre>
<br />
<span style="color: orange; font-size: large;"><b>ဥပမာ_</b></span>[video=http://www.youtube.com/watch?v=ZVHPKBlw4-0]<br />
<br />
<pre class="cpp" name="code">[video=http://www.youtube.com/watch?v=ZVHPKBlw4-0]

</pre>
<br /></div>

How To Add Embed YouTube Videos In Blogger Comments Box

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ Comments Box မွာ Embed YouTube Videos မ်ားထည့္လုိ႔ရေအာင္ လုပ္နည္းေလးပါ။ က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့ေတြမွ...

Mr ThangMing

How To Add Embed YouTube Videos In Blogger Comments Box

Activity Find

Labels

Archives