សួស្ដីអ្នកទាំងអស់គ្នាជាទីគោរពរាប់អាន ថ្ងៃនេះខ្ញុំសូមបង្ហាញពីរបៀបដាក់បញ្ជីចាក់វីដេអូផ្សេងៗដែលវាមានលក្ខណៈដូចជារឿងភាគ ហើយអ្នកអាចទាញយកតំណភ្ជាប់នៃវីដេអូពីគេហទំព័រមួយចំនួនដូចជា៖ 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 ជាការស្រេច៕
Tags:
គន្លឺះប្លក់ហ្គ័រ
