How to put a playlist of videos, movies or other videos on the blog

Punniya seelan
Punniya seelan
May 29, 2022
0

 



Note: Some blog themes will not work for this video playlist.
Let! Do not waste any more time, see how to install below.

Today I will show you how to set up a video playlist on a blog, all of which you can download from Facebook, YouTube, Google Drive, Google Drive, Vimeo ... etc to show it on your blog. Wow! Go and install with me below.

1. Please login to your blog account
2- Go to Theme then Edit HTML
3- Copy the following code from the bottom <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"/>
4- Copy the following code from above </head>
<style type='text/css'>
.sd_player{margin-top:5px;width:100%;height:100%;overflow:hidden;font-size:12px;background-color:#000}
.sd_player *{margin:0;padding:0}
.sd_player a{text-decoration:none}
.sd_player li{list-style:none}
.sd_video{width:100%;background-color:#000;position:relative;overflow:hidden}
.sd_loading{position:absolute;text-align:center;bottom:41.5%;right:44%;color:#FBC02D;font-size:500%;z-index:9999;display:none;background-color:#;padding:5px}
.sd_video iframe{width:100%;height:100%;position:absolute;top:0;left:0;display:none;background-color:#000}
.sd_server{width:100%;height:100%;position:absolute;top:0;left:0;display:none}
.sd_server video{width:100%;height:100%;background-color:#000}
.sd_list{width:100%;overflow:auto;border-top:1px solid #333}
.sd_list li{clear:both;border-left:5px solid #444;border-bottom:1px solid #333;overflow:hidden;cursor:pointer}
.sd_list .selected{border-left:4px solid #FBC02D;background-color:#222222;border-right:2px solid #FBC02D}
.sd_list img{float:left;width:50px;height:45px}
.sd_list div{text-indent:10px;color:#fff}
.sd_list div h2{width:100%;font-size:120%;text-align:left;margin:0;font-weight:400;color:#fff}
.sd_list div p{width:100%;color:#fff!important;font-size:100%}
.sd_list div p a{color:#fff!important;margin-left:10px;line-height:1.7em;}
.sd_control{width:100%;height:35px;line-height:30px;background-color:#444;text-align:center;padding-top: 5px;}
.sd_btn{height:23px;line-height:20px;padding:8px 14px;color: #fff;background-color:#FBC02D;cursor:pointer;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;margin-left:2px;margin-right:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;text-transform:uppercase}
.sd_control .active{background-color:#000}
.sd_desktop .sd_video{float:left;height:100%}
.sd_desktop .sd_videos{float:left;height:100%}
.sd_desktop .sd_btn span{display:none}
.sd_desktop .sd_list{border-top:0}
.sd_desktop .sd_btn{padding:2px 10px;margin-left:5px;margin-right:5px}
.sd_player i.fab.fa-google-drive{background:linear-gradient(to right, #1FA463 60%,#FFD04B 85%,#4688F4 70%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.sd_player i.fab.fa-mixcloud{color:#A6FF1D}
.sd_player i.fab.fa-youtube{color:#DA5E4C}
.sd_player i.fab.fa-vimeo{color:#1ab7ea}
.sd_player i.fas.fa-video{color:#3E8B79}
.sd_player i.fab.fa-facebook{color:#3b5998}
</style>

5- Copy the following code from above </head>
 
<script type='text/javascript'>
    var options = {
        'player_container': '#player',
        'player_ratio': '16:9',
        'player_mobile_on_width': '600',
        'player_desktop_video_width': '70%',
        'automatic_response': false
    }
</script>
6- Copy the following code from above </body>
<script type='text/javascript'>
//<![CDATA[
function Video_player(i){if("undefined"!=typeof $){if(void 0!==i.player_list){var e,s,d=[],t=[],n=[],a=[],l="",o=0,f=0,r=7,c=4,p=50,v=$(i.player_container),h=v.width(),_=i.player_ratio.split(":");_=_[1]/_[0];for(var u=0;u<i.player_list.length;u++)d.push(i.player_list[u].file),t.push(i.player_list[u].title),n.push(i.player_list[u].description),a.push(i.player_list[u].image);l+='<div class="sd_player">',l+='<div class="sd_video"><span class="sd_loading" ><i class="fas fa-spinner fa-pulse fa-fw"/></span>',l+='<iframe id="video_player" src="" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>',l+='<div class="sd_server"></div>',l+="</div>",l+='<div class="sd_videos">',l+='<ul class="sd_list"></ul>',l+='<div class="sd_control">',l+='<span class="sd_prevPage sd_btn"><i class="fas fa-chevron-left"></i><i class="fas fa-chevron-left"></i></span>',l+='<span class="sd_prev sd_btn"><i class="fas fa-chevron-left"></i></span>',l+='<span class="sd_next sd_btn"><i class="fas fa-chevron-right"></i></span>',l+='<span class="sd_nextPage sd_btn"><i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i></span>',l+="</div>",l+="</div>",l+="</div>",v.html(l),l="";for(u=0;u<t.length;u++)l+="<li>",l+='<img style="width: 80px !important; height: 50px !important; " src="',m(d[u])?l+="http://i3.ytimg.com/vi/"+m(d[u])+"/hqdefault.jpg":d[u].indexOf("vimeo")>-1?l+="https://i.imgur.com/nJXkbuG.png":d[u].indexOf("vid")>-1?l+="https://i.imgur.com/nJXkbuG.png":d[u].indexOf("google")>-1?l+="https://i.imgur.com/nJXkbuG.png":l+=a[u],l+='" />',l+="<div>",l+='<h2 style="text-align:left;">',l+='<i class="',m(d[u])?l+="fab fa-youtube":d[u].indexOf("vimeo")>-1?l+="fab fa-vimeo":d[u].indexOf("google")>-1?l+="fab fa-google-drive":d[u].indexOf("sd")>-1?l+="fas fa-video":d[u].indexOf("vid")>-1?l+="fab fa-facebook":l+="fa-file",l+="",l+='"></i> ',l+=t[u]+"</h2>",l+="<p>  https://rithiseth.blogspot.com  </p>",l+="</div>",l+="</li>";v.find(".sd_list").html(l);for(u=0;u<t.length;u++)d[u].indexOf("vimeo")>-1&&$.ajax({type:"GET",url:"http://vimeo.com/api/v2/video/"+d[u].substring(d[u].lastIndexOf("/")+1)+".json",jsonp:"callback",dataType:"jsonp",indexValue:u,success:function(i){var e=i[0].thumbnail_large;v.find(".sd_list").find("li").eq(this.indexValue).find("img").attr("src",e)}});$.getScript("http://f.vimeocdn.com/js/froogaloop2.min.js"),$.getScript("http://www.youtube.com/iframe_api");var g=!1;window.onYouTubeIframeAPIReady=function(){w()},v.find(".sd_list").click(function(){s=!0}),v.find(".sd_list").find("li").outerHeight(p),v.find(".sd_list").find("li").each(function(i){$(this).click(function(){var e,t;(o=i,v.find(".sd_list").find("li").eq(i).hasClass("selected"))||(v.find(".sd_list").find("li").removeClass("selected").eq(i).addClass("selected"),v.find("li").find("div").find("h2").removeClass("sele").eq(i).addClass("sele"),e=d[i],t=e,v.find(".sd_server").find("video").remove(),v.find(".sd_server").hide(),v.find("iframe").attr("src","").hide(),v.find(".sd_loading").show(),m(e)?(t="https://www.youtube.com/embed/"+m(e)+"?autoplay=0&loop=1&showinfo=0&rel=0&enablejsapi=1",s&&(t="https://www.youtube.com/embed/"+m(e)+"?autoplay=1&loop=1&showinfo=0&rel=0&enablejsapi=1"),v.find("iframe").attr("src",t).show(),g&&w()):e.indexOf("vimeo")>-1?(t="https://player.vimeo.com/video/"+e.substring(e.lastIndexOf("/")+1),s?v.find("iframe").attr("src",t+"?api=1&amp;player_id=video_player&amp;autoplay=1").show():v.find("iframe").attr("src",t+"?api=1&amp;player_id=video_player").show(),void 0!==v.find("iframe")[0].addEvent&&v.find("iframe")[0].addEvent("ready",function(i){v.find("iframe")[0].addEvent("finish",function(){s=!0,C()})})):e.indexOf("google")>-1?v.find("iframe").attr("src",t).show():e.indexOf("vid")>-1?v.find("iframe").attr("src",t).show():(l="",l+=s?'<video width="100%" height="100%" controls autoplay>':'<video width="100%" height="100%" controls>',l+='<source src="'+t.replace(".ogg",".mp4")+'" type="video/mp4">',l+='<source src="'+t.replace(".mp4",".ogg")+'" type="video/ogg">',l+="</video>",v.find(".sd_server").show().html(l),v.find("video").bind("ended",function(){s=!0,C()})),v.find("iframe").load(function(){v.find(".sd_loading").hide()}),y())})}),y(),$(window).resize(function(){b()}),b(),v.find(".sd_list").scroll(function(){x($(this))}),x(v.find(".sd_list")),v.find(".sd_prevPage").click(function(){$(this).hasClass("active")&&(f=v.find(".sd_list").scrollTop()-e*v.find(".sd_list").find("li").outerHeight(),f=Math.ceil(f/p),v.find(".sd_list").animate({scrollTop:f*p},500))}),v.find(".sd_prev").click(function(){o>0&&(o--,y(),k("prev"),v.find(".sd_list").find("li").eq(o).trigger("click"))}),v.find(".sd_next").click(function(){o<d.length-1&&(o++,y(),k("next"),v.find(".sd_list").find("li").eq(o).trigger("click"))}),v.find(".sd_nextPage").click(function(){$(this).hasClass("active")&&(f=v.find(".sd_list").scrollTop()+e*p,f=Math.ceil(f/p),v.find(".sd_list").animate({scrollTop:f*p},500))}),v.find(".sd_list").animate({scrollTop:0},10),v.find(".sd_list").find("li").eq(0).trigger("click"),$(document).ready(function(){$("").remove()})}}else alert("Please insert jQuery library!");function m(i){return i.indexOf("watch?v")>-1?i.substring(i.indexOf("?v=")+3):(i.indexOf("youtube")>-1||i.indexOf("youtu.be")>-1)&&i.substring(i.lastIndexOf("/")+1)}function w(){g=!0,new YT.Player("video_player",{events:{onStateChange:function(i){switch(i.data){case YT.PlayerState.ENDED:s=!0,C()}}}})}function y(){o>0?v.find(".sd_prev").addClass("active"):v.find(".sd_prev").removeClass("active"),o<d.length-1?v.find(".sd_next").addClass("active"):v.find(".sd_next").removeClass("active")}function b(){$(window).width()<i.player_mobile_on_width||!i.automatic_response?(e=c,i.automatic_response&&v.width($(window).width()),v.removeClass("sd_desktop"),v.find(".sd_list").height(e*p),v.find(".sd_video").height(v.find(".sd_video").width()*_),v.find(".sd_video").width("100%"),v.find(".sd_videos").width("100%")):(e=r,v.addClass("sd_desktop"),v.width(h),v.find(".sd_list").height(e*(p-.8)),v.find(".sd_video").height(v.find(".sd_videos").outerHeight()),v.find(".sd_video").css("width",i.player_desktop_video_width),v.find(".sd_videos").css("width",100-parseInt(i.player_desktop_video_width)+"%"))}function x(i){i.scrollTop()>0?v.find(".sd_prevPage").addClass("active"):v.find(".sd_prevPage").removeClass("active"),i[0].scrollHeight>=i.outerHeight()+i.scrollTop()+5?v.find(".sd_nextPage").addClass("active"):v.find(".sd_nextPage").removeClass("active")}function k(i){var s=v.find(".sd_list").scrollTop(),d=s+v.find(".sd_list").outerHeight(),t=v.find(".sd_list").find("li").eq(o).offset().top-v.find(".sd_list").find("li").eq(o).parent().offset().top+v.find(".sd_list").find("li").eq(o).outerHeight();return(t+s+10>=d+v.find(".sd_list").find("li").eq(o).outerHeight()||t<1)&&(f=o*p,"prev"==i&&(f=(o-e+1)*p),v.find(".sd_list").animate({scrollTop:f},500)),!0}function C(){o<d.length-1&&(o++,y(),k("next"),v.find(".sd_list").find("li").eq(o).trigger("click"))}}var timer=setInterval(function(){"undefined"!=typeof options&&(new Video_player(options),clearInterval(timer))},50);
//]]>
</script>
7. Click Save Theme.
8- Copy the following code and paste it into Blog Post (HTML Tab)
<div id="player" style="width: 100%;"></div>
<script type="text/javascript">
//<![CDATA[
options.player_list = [ 
{"file": "https://www.youtube.com/watch?v=7DrECLTJdM8","title": "ចាំមើលអ្នកណារកសង្សារបានមុន - កែវ វាសនា","description": "","image": ""},
{"file": "https://www.youtube.com/watch?v=JMBNcZ9iv_U","title": "កម្មពីបុព្វេរ - Rith Acoustic","description": "","image": ""},
{"file": "https://www.youtube.com/watch?v=sUnouxXKYaw","title": "ចាំអូនទល់ព្រឹក - ដួង វីរៈសិដ្ឋ","description": "","image": ""}, 
{"file": "https://vimeo.com/208621116","title": "សុំប៉ះ - STEP","description": "","image": ""}, 
{"file": "https://www.facebook.com/video/embed?video_id=10153231379946729", "title": "How to Share with Just Friend", "description": "", "image": "" }, 
{"file": "https://docs.google.com/file/d/0B-9xsGqNKunnUWcxUzFxMm1LaXc/preview","title": "GoogleDrive Demo Video","description": "","image": ""}, ]; var player = new Video_player(options);
//]]>
</script>
Note: Please make changes to your video.
9. Click Publish.

You may like these posts

Post a Comment

0Comments

Post a Comment (0)
Share to other apps
Copy Post Link