សួស្ដី! អ្នកទាំងអស់គ្នាជាទីគោរពរាប់អាន ថ្ងៃនេះខ្ញុំសូមបង្ហាញគន្លឹះក្នុងការដាក់បញ្ជីចាក់វីដេអូដែលមានលក្ខណៈជារឿងភាគ ឬ រឿងហូលីវូដ ហើយអ្នកអាច 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&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&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[
$('a.video-item').on('click', function () {
$(this).addClass('active').siblings().removeClass('active');
});
//]]>
</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:4px;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;margin:0;box-sizing:border-box}
.video-list .video-item{position:relative;display:flex;flex-direction:column;justify-content:center;align-self:center;margin:0}
.video-list a.video-item{display:inline-block;overflow:hidden;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;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.video-item:before{content:"\f144";font-family:"Font Awesome 5 Free";font-weight:400;display:inline-block;margin:0 5px 0 0}
.video-list a.video-item:hover{opacity:.9}
.video-list a.video-item.active{background:#ef233c}
.video-list a.video-item.active: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.video-item{border-radius:0}
}
</style>* CSS Hollywood Playlist (2)
<style type="text/css">
#player-wrap{position:relative;float:left;width:100%;overflow:hidden;background:rgb(0 0 0 / 8%);border-radius:4px}
.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:75px;overflow:auto;border-top:1px 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:#2196f3;border-radius:10px}
.video-list{position:relative;float:left;width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:15px;padding:15px;margin:0;box-sizing:border-box}
.video-list .video-item{position:relative;display:flex;flex-direction:column;justify-content:center;align-self:center;margin:0}
.video-list a.video-item{display:inline-block;overflow:hidden;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;padding:10px;box-shadow:0 1px 3px 0 rgba(0,0,0,0.17);border-radius:3px;transition:all .17s ease}
.video-list a.video-item:before{content:"\f0a0";font-family:"Font Awesome 5 Free";font-weight:400;color:#2196f3;display:inline-block;margin:0 5px 0 0}
.video-list a.video-item:hover{color:#2196f3}
.video-list a.video-item.active{background-color:#2196f3;color:#ffffff}
.video-list a.video-item.active:before{content:"\f863";font-weight:900;color:#ffffff;animation:spin 1.5s linear infinite}
.video-list a.video-item.active:hover{color:#ffffff}
@-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 src="https://www.dailymotion.com/embed/video/x6h0c3t" width="100%" height="100%" name="frame_vid" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="playlist-wrap">
<div class="video-list">
<a href="https://www.dailymotion.com/embed/video/x809cjm?autoplay=1" class="video-item" target="frame_vid">Episode 1 - ភាគទី ០១</a>
<a href="https://www.dailymotion.com/embed/video/x80df9h?autoplay=1" class="video-item" target="frame_vid">Episode 2 - ភាគទី ០២</a>
<a href="https://www.dailymotion.com/embed/video/x80hztu?autoplay=1" class="video-item" target="frame_vid">Episode 3 - ភាគទី ០៣</a>
<a href="//ok.ru/videoembed/1794337016372?autoplay=1" class="video-item" target="frame_vid">Episode 4 - ភាគទី ០៤</a>
<a href="//ok.ru/videoembed/2103158246031?autoplay=1" class="video-item" target="frame_vid">Episode 5 - ភាគទី ០៥</a>
<a href="//ok.ru/videoembed/433312500367?autoplay=1" class="video-item" target="frame_vid">Episode 6 - ភាគទី ០៦</a>
<a href="https://www.youtube.com/embed/DaH2m8xMiEY?autoplay=1" class="video-item" target="frame_vid">Episode 7 - ភាគទី ០៧</a>
<a href="https://www.youtube.com/embed/AAiueaU52JQ?autoplay=1" class="video-item" target="frame_vid">Episode 8 - ភាគទី ០៨</a>
<a href="https://www.youtube.com/embed/oqQHifRfQzo?autoplay=1" class="video-item" target="frame_vid">Episode 9 - ភាគទី ០៩</a>
</div>
</div>
</div>
</div>* HTML Hollywood Playlist (2)
<div id='player-wrap'>
<div class="responsive-vid">
<iframe src="https://drive.google.com/file/d/1L8FgHReitYc6p7nfbqvd2ACaUvjJAhM7/preview" width="100%" height="100%" name="frame_vid" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="playlist-wrap">
<div class="video-list">
<a href="https://drive.google.com/file/d/1mcwCppTkxJqQB4HgF9OVOKfilaq90uOe/preview" class="video-item" target="frame_vid">Google Drive - HD 720p</a>
<a href="https://hls.hdv.fun/imdb/tt3606756?raj=1" class="video-item" target="frame_vid">StreamTap - HD 1080p</a>
<a href="//ok.ru/videoembed/1783986850505?autoplay=1" class="video-item" target="frame_vid">OK.ru - SD 480p</a>
<a href="https://hls.hdv.fun/imdb/tt3794354?raj=1" class="video-item" target="frame_vid">Mango Stream - HQ 2K</a>
<a href="https://hls.hdv.fun/imdb/tt1634106?raj=1" class="video-item" target="frame_vid">Ninja Stream - HQ 4K</a>
<a href="https://drive.google.com/file/d/15BhgagIqNn5HfvfKvV4Kjc7jzHrkFMrs/preview" class="video-item" target="frame_vid">FX Stream - HQ 8K</a>
</div>
</div>
</div>
</div>* ចំណាំ៖ សូមប្ដូរ Link Video ដែលអ្នកចង់ Embed
៧.ចុចពាក្យ Publish ជាការស្រេច។
សូមអរគុណ! ជួបគ្នាពេលក្រោយទៀត៕