Hi everyone, today I would like to share a lesson with you about how to put a video playlist on a blogger as a series of movies or show. So, when you Embed videos from other websites such as Facebook, YouTube, Google Drive, Vimeo, Dailymotion, Ok.ru ... etc. it can be played on your site continuously on just one page.
Please follow the steps below one by one before you start, make sure you understand it 100% first before you try.
Example 1
Example 2
.png)
Example 3
1. Go to Theme and select Edit HTML
2. Copy the following code from below <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'/>
3. Copy the following code from above </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>
4. Copy the following code from above </head> by choosing any Style Playlist you like
* 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>
5. Click Save Theme and leave the Edit HTML tab.
6. Copy the following code into the Blog Post by converting to 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>
* Note : Please change the Video Link you want to Embed
* Each video link must be converted to Base64 Format first
* Website for converting to Base64: https://www.base64encode.org
7. Click Publish. Thank you! See you later.
