របៀបដាក់បញ្ជីចាក់វីដេអូជាលក្ខណៈរឿងភាគ

on
​​   ថ្ងៃនេះខ្ញុំនឹងបង្ហាញអំពីរបៀបតម្លើងបញ្ជីចាក់វីដេអូផ្សេងៗជា លក្ខណៈរឿងភាគដាក់នៅលើប្លក់ ហើយមិនតែប៉ុណ្ណោះ អ្នកអាចទាញតំណរភ្ជាប់វីដេអូពី Facebook, YouTube, Google Drive, Vimeo, និង Ok.ru ដើម្បីឲបង្ហាញ នៅលើប្លក់របស់អ្នក ចំណែកលក្ខណៈពិសេសជាងនេះទៅទៀត នោះវាក៏មានប៊ូតុងសម្រាប់ចុចប្តូរភាគនៅខាងក្រោម វីដេអូផងដែរ។
១-សូមចូលទៅកាន់គណនីប្លក់របស់អ្នក
២-ចូលទៅកាន់ Theme បន្ទាប់មក Edit HTML
៣-ចម្លងកូដខាងក្រោមដាក់ពីខាងក្រោម <head>
ចំណាំ៖ ប្រសិនបើអ្នកមានកូដរបស់ 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 ជាការស្រេច។

Comments

Post a Comment