១.ចូលទៅកាន់ 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[ ! 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 Drama 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 Drama 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 ជាការស្រេច។ សូមអរគុណ! ជួបគ្នាពេលក្រោយទៀត៕
______________
ប្រភពពី https://www.rithisethtes.com/2021/06/video-playlist.html