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

១.ចូល​ទៅ​កាន់ Theme រួច​យក​ពាក្យ Edit HTML
២.ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​ក្រោម <head>
<link href='https://fonts.googleapis.com/css2?family=Nokora:wght@400;700&amp;display=swap' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&amp;display=swap' rel='stylesheet'/>
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' integrity='sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==' referrerpolicy='no-referrer' rel='stylesheet'/>
៣.ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ </body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
! function initPlaylist() {
    const videoIframe = document.querySelector('#iframe-embed');
    const videoItems = document.querySelectorAll('.vid-item');
    videoIframe.src = window.atob(videoItems[0].getAttribute('data-embed'));
    for (var i = 0; i < videoItems.length; i++) {
        videoItems[i].addEventListener("click", function (event) {
            videoIframe.src = window.atob(event.target.getAttribute('data-embed'));
            $(this).addClass('selected').siblings().removeClass('selected');
        });
        $(videoItems).first().addClass('selected');
    }
}(jQuery);
//]]>
</script>
៤.ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ </head> ដោយ​ជ្រើស​រើស​ Style Playlist ណា​មួយ​ដែល​អ្នក​ពេញ​ចិត្ត
* CSS Drama Playlist (1)
<style type="text/css">
#player-wrap{position:relative;float:left;width:100%;overflow:hidden;background:rgba(0,0,0,1);border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,0.17)}
.responsive-vid{position:relative;width:100%;padding:0;padding-top:56%}
.responsive-vid iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.playlist-wrap{position:relative;float:left;width:100%;height:133px;overflow:auto;border-top:2px solid rgba(155,155,155,0.15)}
.playlist-wrap::-webkit-scrollbar{width:10px}
.playlist-wrap::-webkit-scrollbar-track{background:rgba(0,0,0,0.3);border-radius:10px}
.playlist-wrap::-webkit-scrollbar-thumb{background:#673ab7;border-radius:10px}
.video-list{counter-reset:episode-number;position:relative;float:left;width:100%;display:grid;grid-template-columns:repeat(6,1fr);grid-gap:15px;padding:15px;box-sizing:border-box}
.video-list a.vid-item{position:relative;display:flex;flex-direction:column;min-height:40px;justify-content:center;align-items:center;font-family:'Poppins','Nokora',sans-serif;font-size:17px;font-weight:900;font-style:italic;background:#673ab720;color:#673ab7;text-decoration:none;cursor:pointer;padding:0 5px;box-shadow:0 1px 3px 0 rgba(0,0,0,0.17);border:2px solid #673ab7;transition:background .17s}
.video-list a.vid-item:before{content:counter(episode-number);counter-increment:episode-number}
.video-list a.vid-item:hover{background:#673ab7;border:2px solid #ffffff;color:#ffffff}
.video-list a.vid-item.selected{background:#673ab7;border:2px solid #ffffff;color:#ffffff}
.video-list a.vid-item.selected:before{animation:horizontal 1.3s ease infinite}
@-webkit-keyframes horizontal{0%,12%,24%,36%,100%{transform:translate(0,0)}6%,18%,30%{transform:translate(5px,0)}}
@keyframes horizontal{0%,12%,24%,36%,100%{transform:translate(0,0)}6%,18%,30%{transform:translate(5px,0)}}
@media screen and (max-width: 680px){
.video-list{grid-template-columns:repeat(3,1fr);grid-gap:10px;padding:10px}
}
</style>
* CSS Drama Playlist (2)
<style type="text/css">
#player-wrap{position:relative;float:left;width:100%;overflow:hidden;background:rgba(0,0,0,1);border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,0.17)}
.responsive-vid{position:relative;width:100%;padding:0;padding-top:56%}
.responsive-vid iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.playlist-wrap{position:relative;float:left;width:100%;height:133px;overflow:auto;border-top:2px solid rgba(155,155,155,0.15)}
.playlist-wrap::-webkit-scrollbar{width:10px}
.playlist-wrap::-webkit-scrollbar-track{background:rgba(0,0,0,0.3);border-radius:10px}
.playlist-wrap::-webkit-scrollbar-thumb{background:linear-gradient(135deg, #673ab7 0%,#3f51b5 100%);border-radius:10px}
.video-list{position:relative;float:left;width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:15px;padding:15px;box-sizing:border-box}
.video-list a.vid-item{background:linear-gradient(135deg, #673ab7 0%,#3f51b5 100%);font-family:'Poppins','Nokora',sans-serif;font-weight:400;font-size:15px;color:#ffffff;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;cursor:pointer;overflow:hidden;padding:10px 15px 10px 15px;box-shadow:0 1px 3px 0 rgba(0,0,0,0.17);border-radius:40px;transition:opacity .17s ease}
.video-list a.vid-item:before{content:"\f4ba";font-family:"Font Awesome 5 Free";font-weight:900;display:inline-block;margin:0 5px 0 0}
.video-list a.vid-item:hover{opacity:.9}
.video-list a.vid-item.selected{background:#4caf50}
.video-list a.vid-item.selected:before{animation:horizontal 1.3s ease infinite}
@-webkit-keyframes horizontal{0%,12%,24%,36%,100%{transform:translate(0,0)}6%,18%,30%{transform:translate(5px,0)}}
@keyframes horizontal{0%,12%,24%,36%,100%{transform:translate(0,0)}6%,18%,30%{transform:translate(5px,0)}}
@media screen and (max-width: 680px){
.video-list{grid-template-columns:1fr;grid-gap:10px;padding:10px}
.video-list a.vid-item{border-radius:0}
}
</style>
* CSS Hollywood Playlist (3)
<style type="text/css">
#player-wrap{position:relative;float:left;width:100%;overflow:hidden;background:rgb(0 0 0 / 8%);border-radius:5px}
.responsive-vid{position:relative;width:100%;padding:0;padding-top:56%}
.responsive-vid iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.playlist-wrap{position:relative;float:left;width:100%;height:auto;border-top:1px solid rgba(155,155,155,0.15)}
.video-list{position:relative;float:left;width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:15px;padding:15px;box-sizing:border-box}
.video-list a.vid-item{font-family:'Poppins','Nokora',sans-serif;font-weight:400;font-size:15px;color:#212121;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;cursor:pointer;overflow:hidden;padding:10px;box-shadow:0 1px 3px 0 rgba(0,0,0,0.17);border-radius:3px;transition:all .17s ease}
.video-list a.vid-item:before{content:"\f0a0";font-family:"Font Awesome 5 Free";font-weight:400;color:#ff5722;display:inline-block;margin:0 5px 0 0}
.video-list a.vid-item:hover{color:#ff5722}
.video-list a.vid-item.selected{background-color:#ff5722;color:#ffffff}
.video-list a.vid-item.selected:before{content:"\f863";font-weight:900;color:#ffffff;animation:spin 1.5s linear infinite}
@-webkit-keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
@media screen and (max-width: 680px){
.video-list{grid-template-columns:1fr;grid-gap:10px;padding:10px}
}
</style>
៥.ចុច​ពាក្យ Save Theme រួច​ចាកចេញ​ពី​ផ្ទាំង Edit HTML។
៦.ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ចូល​ទៅ​កាន់ Blog Post ដោយ​ប្ដូរ​ទៅ​ជា​ HTML View
* HTML Drama Playlist (1)
<div id='player-wrap'>
  <div class='responsive-vid'>
    <iframe id="iframe-embed" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
    <div class='playlist-wrap'>
      <div class='video-list'>
        <a class="vid-item" data-embed="aHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvRGFIMm04eE1pRVk/YXV0b3BsYXk9MQ=="></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
        <a class="vid-item" data-embed=""></a>
      </div>
    </div>
  </div>
</div>
* HTML Drama Playlist (2)
<div id='player-wrap'>
  <div class='responsive-vid'>
    <iframe id="iframe-embed" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
    <div class='playlist-wrap'>
      <div class='video-list'>
        <a class="vid-item" data-embed="aHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvRGFIMm04eE1pRVk/YXV0b3BsYXk9MQ==">Episode 1 - ភាគទី ០១</a>
        <a class="vid-item" data-embed="">Episode 2 - ភាគទី ០២</a>
        <a class="vid-item" data-embed="">Episode 3 - ភាគទី ០៣</a>
        <a class="vid-item" data-embed="">Episode 4 - ភាគទី ០៤</a>
        <a class="vid-item" data-embed="">Episode 5 - ភាគទី ០៥</a>
        <a class="vid-item" data-embed="">Episode 6 - ភាគទី ០៦</a>
        <a class="vid-item" data-embed="">Episode 7 - ភាគទី ០៧</a>
        <a class="vid-item" data-embed="">Episode 8 - ភាគទី ០៨</a>
        <a class="vid-item" data-embed="">Episode 9 - ភាគទី ០៩</a>
      </div>
    </div>
  </div>
</div>
* HTML Hollywood Playlist (3)
<div id='player-wrap'>
  <div class='responsive-vid'>
    <iframe id="iframe-embed" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
    <div class='playlist-wrap'>
      <div class='video-list'>
        <a class="vid-item" data-embed="aHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvRGFIMm04eE1pRVk/YXV0b3BsYXk9MQ==">Vidcloud_Hydrax - HD 720p</a>
        <a class="vid-item" data-embed="">DooStream - HD 1080p</a>
        <a class="vid-item" data-embed="">StreamTap - HD 720p</a>
      </div>
    </div>
  </div>
</div>
* ចំណាំ៖ សូមប្ដូរ Link Video ដែល​អ្នក​ចង់ Embed
* Link Video នីមួយៗ​ត្រូវ​បម្លែង​ទៅ​ជា Base64 Format ជា​មុន​សិន
* គេហទំព័រ​សម្រាប់​បម្លែង​ទៅ​ជា Base64៖ https://www.base64encode.org
៧.ចុច​ពាក្យ Publish ជា​ការ​ស្រេច។

សូមអរគុណ! ជួប​គ្នា​ពេល​ក្រោយ​ទៀត៕