តម្លើងផ្ទាំងឆាណែលយូធូបដាក់នៅលើប្លក់

   ស្វាគមន៍មកកាន់ថ្ងៃដំបូង នៃខែថ្មីថ្ងៃនេះខ្ញុំមានគន្លឹះថ្មីមួយដើម្បីចែក រំលែកទៅកាន់អ្នកស្នេហា ទៅលើបណ្តាញ ប្លក់ហ្គ័រ។ ក្នុងអត្ថបទនេះខ្ញុំនឹងបង្ហាញដល់អ្នកទាំងអស់គ្នាអំពីរបៀបដាក់ផ្ទាំងឆា ណែលយូធូបនៅលើប្លក់ដើម្បី បង្ហាញវីដេអូដែលអ្នកបានបង្ហោះ។
   គន្លឹះនេះអាចជួយឲអ្នកចូល ទស្សនាពួកគេអាចស្វែងរកវីដេអូរបស់អ្នកបានលឿន និងអាចឲពួក គេចុចជាវ (Subscribe) ទៀត ផង។ ប្រសិនបើអ្នកចូលចិត្តនូវគន្លឹះមួយនេះអាចរៀនតម្លើងជាមួយ ខ្ញុំនៅខាងក្រោមទាំង អស់គ្នា។

១-សូមចូលទៅកាន់គណនីប្លក់របស់អ្នក
២-ចូលទៅកាន់ Theme បន្ទាប់មក Edit HTML
៣-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </head>
<style type='text/css'>
/* Channel Iframe
------------------------------------- */
.ycp{font-family:Hanuman,"Roboto Condensed","Helvetica","Arial",sans-serif;font-size:1em;color:#444;background:#000;display:block;width:100%;height:500px}
.ycp,.ycp .belah{box-sizing:border-box;padding:0;margin:0}
.ycp .belah{display:inline-block;vertical-align:top;height:100%}
.ycp .belah:first-of-type{width:65%}
.ycp .belah:last-of-type{width:35%}
.ycp .belah .luhur{color:#fff;background:#222;display:block;width:100%;height:70px;box-sizing:border-box;padding:10px;margin:0}
.ycp .belah .handap{color:#ddd;background:#111;height:calc(100% - 70px);padding:0;overflow-y:auto}
.ycp .belah .handap,.ycp .belah .bingkay{display:block;width:100%;box-sizing:border-box;margin:0}
.ycp .belah .bingkay{height:100%;border:0}
.ycp .belah .luhur span.tombol{background:#444;padding:4px 10px;margin-right:0px;color:silver}
.ycp .belah .luhur span.tombol:hover{background:#ff0000;color:#fff;}
.ycp .belah .luhur span.about{float:right;background:#111;padding:2px;margin-top:-3px;border-radius:50%;width:20px;height:20px;text-align:center}
.ycp a{text-decoration:none;outline:0}
.ycp a img{border:0}
.ycp .belah.ycp_vid_play{cursor:pointer}
.ycp .belah.ycp_vid_play a{background:#e52d27;width:120px;height:75px;display:block;border-radius:10%;position:relative;top:calc(50% - 35px);left:calc(50% - 60px);text-align:center}
.ycp .belah.ycp_vid_play a::before{color:#fff;content:"\25B6";z-index:100;font-size:50px}
.ycp .belah .thumb{float:left;margin-right:10px;position:relative;height:61px}
.ycp .belah .thumb span{position:absolute;right:2px;bottom:-2px;padding:2px;background:#000;color:silver;font-size:.8em}
.ycp .belah .play{margin:0;padding:10px;display:block;overflow:hidden;*overflow:visible}
.ycp .belah .luhur div.title{text-align:center;color:#fff;border-bottom:1px solid #111;padding-bottom:5px;margin-bottom:10px}
.ycp .belah .handap div.title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ycp .belah span.mute,.ycp .belah span.about a{color:#767676;font-size:.8em}
.ycp .belah .thumb img{width:80px;height:100%;border:2px solid #000}
.ycp .belah .play:hover,.ycp .belah .vid-active{background:#000}
.ycp .belah .luhur .vid-prev,.ycp .belah .luhur .vid-next,.ycp .belah .play{cursor:pointer}
@media screen and (max-width:767px){.ycp{height:1000px}
.ycp .belah,.ycp .belah:first-of-type,.ycp .belah:last-of-type{width:100%;display:block}
.ycp .belah:first-of-type{height:40%}
.ycp .belah:last-of-type{height:60%}}
/* Subscriber Counter
------------------------------------- */
.youtube-tv .yt-bar{width:100%;height:40px;float:left;background:#585858}
.youtube-tv .yt-bar .yt-title{text-transform:uppercase;height:40px;float:left;color:#fff;font-size:18px;padding:9px 0 0 15px}
.youtube-tv .yt-bar .yt-title span{color:#ed1c24}
.youtube-tv .yt-bar #___ytsubscribe_0{float:right!important;margin:8px 15px 0 0!important}
</style>
៤-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </body>
<script src='https://apis.google.com/js/platform.js'></script>
<script type='text/javascript'>
//<![CDATA[
$.fn.ycp=function(a){var e=10,t=!0,i=!0;function s(e,t,i,c,l){$.ajax({url:"https://www.googleapis.com/youtube/v3/playlistItems?part=status,snippet&maxResults="+a.playlist+"&playlistId="+t+"&key="+a.apikey+"&pageToken="+i,dataType:"json"}).done(function(p){var n="";if(n+='<div class="luhur">',n+='<div class="title">'+e+"</div>",n+='<span class="tombol vid-prev" title="Previous videos">Prev</span> ',n+='<span class="tombol vid-next" title="Next videos">Next</span><span class="about" title="RithiSeth Tes"><a href="https://www.rithiseth.com" target="_BLANK">♥</a></span></div><div class="handap">',$.each(p.items,function(e,t){if("public"==p.items[e].status.privacyStatus){var i=p.items[e].snippet.resourceId.videoId;s=i,d=e,o=c,v=l,$.ajax({url:"https://www.googleapis.com/youtube/v3/videos?id="+s+"&key="+a.apikey+"&part=contentDetails,snippet,statistics",dataType:"json"}).done(function(a){var e,t,i,s=a.items[0].contentDetails.duration,c="",l="",p="";s.match(/M/g)?(c=s.split("M"),l=c[0].replace("PT",""),p=""!=c[1]?c[1].replace("S",""):"00"):(c=s.split("PT"),l="00",p=c[1].replace("S","")),$(v+" .ycp div#ycp_youtube_channels"+o+" span.tm"+d).html(l+":"+p),$(v+" .ycp div#ycp_youtube_channels"+o+" span.by"+d).html("by "+a.items[0].snippet.channelTitle),$(v+" .ycp div#ycp_youtube_channels"+o+" span.views"+d).html(function(a){x=(a+="").split("."),x1=x[0],x2=x.length>1?"."+x[1]:"";for(var e=/(\d+)(\d{3})/;e.test(x1);)x1=x1.replace(e,"$1,$2");return x1+x2}(a.items[0].statistics.viewCount)+" views"),$(v+" .ycp div#ycp_youtube_channels"+o+" span.date"+d).html((e=new Date(a.items[0].snippet.publishedAt).getTime(),t=Math.floor((new Date-e)/1e3),(i=Math.floor(t/31536e3))>1?i+" years ago":(i=Math.floor(t/2592e3))>1?i+" months ago":(i=Math.floor(t/86400))>1?i+" days ago":(i=Math.floor(t/3600))>1?i+" hours ago":(i=Math.floor(t/60))>1?i+" minutes ago":Math.floor(t)+" seconds ago"))}),n+='<div class="play" data-vvv="'+i+'" data-img="'+p.items[e].snippet.thumbnails.high.url+'" title="'+p.items[e].snippet.title+'"><div class="thumb"><img src="'+p.items[e].snippet.thumbnails.default.url+'" alt=" "><span class="tm'+e+'"></span></div>',n+='<div class="title">'+p.items[e].snippet.title+'</div><span class="mute by'+e+'"></span><br><span class="mute views'+e+'"></span> <span class="mute">-</span> <span class="mute date'+e+'"></span></div>'}var s,d,o,v}),n+="</div>",$(l+" .ycp div#ycp_youtube_channels"+c).html(n),null==p.prevPageToken||void 0==p.prevPageToken){var d=$(l+" .ycp div#ycp_youtube_channels"+c+" div.play").attr("data-vvv"),o=$(l+" .ycp div#ycp_youtube_channels"+c+" div.play").attr("data-img");0==a.autoplay?($(l+" .ycp div.ycp_vid_play:eq("+c+")").html('<a href="#"></a>'),$(l+" .ycp div.ycp_vid_play:eq("+c+")").css("background","url("+o+") no-repeat"),$(l+" .ycp div.ycp_vid_play:eq("+c+")").css("-webkit-background-size","cover"),$(l+" .ycp div.ycp_vid_play:eq("+c+")").css("-moz-background-size","cover"),$(l+" .ycp div.ycp_vid_play:eq("+c+")").css("-o-background-size","cover"),$(l+" .ycp div.ycp_vid_play:eq("+c+")").css("background-size","cover")):$(l+" .ycp div.ycp_vid_play:eq("+c+")").html('<iframe src="//www.youtube.com/embed/'+d+"?rel="+(a.related?1:0)+'&amp;autoplay=1" allowfullscreen="" frameborder="0" class="bingkay"></iframe>'),$(l+" .ycp div#ycp_youtube_channels"+c+" div").removeClass("vid-active"),$(l+" .ycp div#ycp_youtube_channels"+c+" div.play:eq(0)").addClass("vid-active")}else $(l+" .ycp div#ycp_youtube_channels"+c+" span.vid-prev").click(function(){return i=p.prevPageToken,s(e,t,i,c,l),!1});$(l+" .ycp div#ycp_youtube_channels"+c+" span.vid-next").click(function(){return i=p.nextPageToken,s(e,t,i,c,l),!1}),$(l+" .ycp div#ycp_youtube_channels"+c+" div.play").each(function(){$(this).click(function(){var e=$(this).attr("data-vvv"),t=$(this).attr("data-img");return $(l+" .ycp div#ycp_youtube_channels"+c+" div").removeClass("vid-active"),$(this).addClass("vid-active"),0==a.autoplay?($(l+" .ycp div.ycp_vid_play:eq("+c+")").html('<a href="#"></a>'),$(l+" .ycp div.ycp_vid_play:eq("+c+")").css("background","url("+t+") no-repeat"),$(l+" .ycp div.ycp_vid_play:eq("+c+")").css("-webkit-background-size","cover"),$(l+" .ycp div.ycp_vid_play:eq("+c+")").css("-moz-background-size","cover"),$(l+" .ycp div.ycp_vid_play:eq("+c+")").css("-o-background-size","cover"),$(l+" .ycp div.ycp_vid_play:eq("+c+")").css("background-size","cover")):$(l+" .ycp div.ycp_vid_play:eq("+c+")").html('<iframe src="//www.youtube.com/embed/'+e+"?rel="+(a.related?1:0)+'&amp;autoplay=1" allowfullscreen="" frameborder="0" class="bingkay"></iframe>'),!1})}),$(l+" .ycp div.ycp_vid_play:eq("+c+")").click(function(){var e=$(l+" .ycp div#ycp_youtube_channels"+c+" div.play.vid-active").attr("data-vvv");return $(this).html('<iframe src="//www.youtube.com/embed/'+e+"?rel="+(a.related?1:0)+'&amp;autoplay=1" allowfullscreen="" frameborder="0" class="bingkay"></iframe>'),!1})})}a.playlist=void 0==a.playlist?e:a.playlist,a.autoplay=void 0==a.autoplay?t:a.autoplay,a.related=void 0==a.related?i:a.related,$(this).each(function(e,t){var i,c,l,p,n,d=null!=$(this).attr("id")&&void 0!=$(this).attr("id")?"#"+$(this).attr("id"):"."+$(this).attr("class"),o=void 0==$(this).data("ycp_title")?"YCP.js":$(this).data("ycp_title"),v=$(this).data("ycp_channel"),y='<div class="ycp"><div class="belah ycp_vid_play" title="Play video"></div><div class="belah" id="ycp_youtube_channels'+e+'"></div></div>';if($(this).html(y),"PL"==v.substring(0,2)||"UU"==v.substring(0,2)){s(o,v,"",e,d)}else{var r="UC"==v.substring(0,2)?"id":"forUsername";i=o,c=v,l=r,p=e,n=d,$.ajax({url:"https://www.googleapis.com/youtube/v3/channels?part=contentDetails&"+l+"="+c+"&key="+a.apikey,crossDomain:!0,dataType:"json"}).done(function(a){var e=a.items[0].contentDetails.relatedPlaylists.uploads;s(i,e,"",p,n)})}})};
//]]>
</script>
៥-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </body>
ចំណាំ៖ តម្រូវការ Youtube API Key ចូលទៅកាន់ https://console.cloud.google.com​ ដើម្បីបង្កើត រួចយកមក ជំនួសនៅកូដហាយឡាយខាងក្រោម xxxxxxxxxxxxxx
<script>
$(function() {
    $("#unix").ycp({
        apikey: 'xxxxxxxxxxxxxxxx',
        playlist: 20,
        autoplay: true,
        related: true
    });
});
</script>
៦-ចម្លងកូដខាងក្រោមដាក់កន្លែងដែលអ្នកចង់អោយ ផ្ទាំងឆាណែលយូធូប បង្ហាញ
<div class='youtube-tv'>
<div class='yt-bar'>
<div class='yt-title'>Khmer Blogger - <span>YouTube</span> Channel</div>
<div class='g-ytsubscribe' data-channel='HangMeasVideo' data-count='default' data-layout='default'>
</div></div></div>
<div id="unix" data-ycp_title="Please Subscribe Us!" data-ycp_channel="HangMeasVideo"></div>
ចំណាំ៖
- ប្រើ data-channel ប្រសិនបើឆាណែលយូធូបរបស់អ្នកមាន Username។
ឧទាហរណ៍៖ HangMeasVideo
- ប្រើ data-channelid ប្រសិនបើឆាណែលយូធូបរបស់អ្នកគ្មាន Username។
ឧទាហរណ៍៖ UCwcCOMIcauT25vhUtkuxDIw
- ប្រើ data-ycp_channel គាំទ្រទាំងពីរ Username និង ID​ (ប្រើមួយណាក៍បាន)។ 
៧-ចុចពាក្យ Save Theme។
សូមអរគុណ! ជួបគ្នានៅគន្លឹះក្រោយៗបន្តទៀត៕

មានចម្ងល់បញ្ចេញមតិនៅខាងក្រោម

  1. តើ​វាមាន​មុខងារ responsive ដែលឬទេ?

    ReplyDelete

*