បញ្ជី​ចាក់​វីដេអូ - Video Playlist

 


សួស្ដី! អ្នក​ទាំង​អស់​គ្នា​ជា​ទី​គោរព​រាប់អាន ថ្ងៃ​នេះ​ខ្ញុំ​សូម​បង្ហាញ​គន្លឹះ​ក្នុង​ការ​ដាក់​បញ្ជីចាក់​វីដេអូ​ដែល​មាន​លក្ខណៈ​ជា​រឿង​ភាគ ឬ រឿង​ហូលីវូដ ហើយ​អ្នក​អាច 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[
$('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 ជា​ការ​ស្រេច។

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

Comment