​​   សួស្ដី​អ្នក​ទាំង​អស់​គ្នា​ជា​ទី​គោរព​រាប់​អាន ថ្ងៃ​នេះ​ខ្ញុំ​សូម​បង្ហាញ​ពី​របៀប​ដាក់​បញ្ជី​ចាក់​វីដេអូ​ផ្សេង​ៗ​ដែល​វា​មាន​លក្ខណៈដូច​ជា​រឿង​ភាគ​ ហើយ​អ្នក​អាច​ទាញ​យក​តំណ​ភ្ជាប់​នៃ​វីដេអូ​ពី​គេហ​ទំព័រ​មួយ​ចំនួន​ដូច​ជា​៖ Facebook, YouTube, Google Drive,​ Vimeo, Ok.ru... ជា​ដើម​។ បន្ថែម​ពី​នេះ​ទៅ​ទៀត​នោះ​វា​មាន​នូវ​ប៊ូតុង​សម្រាប់​ចុច​ប្ដូរ​ភាគ​នៅ​ខាង​ក្រោម​វីដេអូ​ផង​ដែរ​។


១-សូម​ចូល​ទៅ​កាន់​គណនី​ប្លុក​របស់​អ្នក​
២-ចូល​ទៅ​កាន់ Theme បន្ទាប់​មក Edit HTML
៣-ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​ក្រោម <head>
ចំណាំ​៖ ប្រ​សិន​បើ​អ្នក​មាន​កូដ Icon Font Awesome Version 5 រួច​រាល់​នៅ​ក្នុង​ស្បែក​ប្លុក​សូម​រំ​លង​ចំណុច​នេះ
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"/>
៤-ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ </head>
<style type='text/css'>
.video-title{display:block;text-align:center;padding:10px;font-size:14px;font-weight:600;background:#212121;color:#fff;border-bottom:2px solid red}
.video-epsx{background:#212121;display:block;padding:10px;overflow:hidden;clear:both;text-align:center;border-top:2px solid red}
.video-epsx a{background:#444;font-size:14px;color:#fff;display:inline-block;padding:6px 8px;margin:5px;cursor:pointer;font-weight:600;border-radius:3px;transition:all 0.6s}
.video-epsx a:before{content:"\f28b";font-family:"Font Awesome 5 Free";font-weight:400;margin:0 3px 0 0}
.video-epsx a.activated{background:red;color:#fff}
.video-epsx a.activated:before{content:"\f144";animation:flash 2s infinite}
.video-epsx a:hover{background:#333;text-decoration:none}
.respon-vdo{position:relative;padding-bottom:56.25%;padding-top:0;height:0;overflow:hidden}
.respon-vdo iframe,.respon-vdo object,.respon-vdo embed{position:absolute;top:0;left:0;width:100%;height:100%}
.respon-vdo img{height:auto}
@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}
@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}
</style>
៥-ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ </body>
<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){!function(){for(var t=video_listx.length,e=$(".tab-eps"),a=0;a<t;a++)e.append("<a class='button-eps' data-id='"+a+"' data-eps='Episode "+(a+1)+"'>Part "+(a+1)+"</a>");var i=$(".show-video");$(".button-eps").click(function(){i.html('<div class="respon-vdo"><iframe src="'+video_listx[parseInt($(this).data("id"))]+'" allowfullscreen="true" frameborder="0" width="100%" height="360"></iframe></div>'),$(".video-title").text($(this).data("eps"))})}(),$(".button-eps").click(function(){$(".video-epsx a").removeClass("activated"),$(this).addClass("activated")})});
//]]>
</script>
</b:if>
៦-ចុច​ពាក្យ Save Theme​។
៧-ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ចូល​ទៅ​ក្នុង Blog Post (HTML Tab)
<span class="video-title">Please Select Episode</span>
<div class="show-video respon-vdo">
<img src="https://i.ytimg.com/vi/dc1DW46TNYA/maxresdefault.jpg" width="100%" height="400"/>
</div>
<div class="tab-eps video-epsx"></div>
<script>
var video_listx = [
"https://www.youtube.com/embed/dc1DW46TNYA",
"https://drive.google.com/file/d/0Bwh7cTp2lB3PRmgtODRWOENEb28/preview",
"https://www.facebook.com/video/embed?video_id=10153231379946729",
"https://player.vimeo.com/video/208621116",
"https://www.ok.ru/videoembed/694082275842",
]
</script>
កំណត់​សម្គាល់​​៖ សូម​ធ្វើ​ការ​ផ្លាស់​ប្ដូរ​រូបភាព​និង ID VIDEO កន្លែង​ហាយ​ឡាយ​កូដ​ខាង​លើ​
៨-ជា​ចុង​ក្រោយ​ចុច​ពាក្យ Publish ជា​ការ​ស្រេច​៕