How to make video playlist on blogger post | KhmerueTeams Official
Home  ›  Blogger SEO  ›  HTML  ›  KhmerueTeams

How to make video playlist on blogger post

, , Edit

As you know it before, a blogger actually can post or embed the code to post, but if you want to post a playlist is the problem for you all. Generally, Video playlist are posting about soap, or movie clips To post the video playlist on blogger! you need to have some codes as shown below.

Step 1. Go to blogger dashboard and click on the theme > Edit Html > and then press CTRL + F to find the <head> tag.

Step 2. Copy and past the following code plug in and place it just below the <head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"/>

Step 3. Click inside the code area again and then Press CTRL +F and search for the closing </head> tag. and then copy and paste these script just above/before the closing </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>

<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>

Step 4. Click inside the code area again and find the closing </body> tag. and paste the following script codes just above/before of </body>tag.

<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+="</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>

Step 5. Click on save Template and you almost done! and now go back the post board. and click on New Post. when the new black post page is appeared. click on the top left hand side and select the HTML View.

Step 6. Copy and paste the following codes below the empty white sheet.

<div id="player" style="width: 100%;"></div>

<script type="text/javascript">

//<![CDATA[

options.player_list = [


{"file": "//ok.ru/videoembed/1241617730233","title": " Ep 01-02","description": ""},

{"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>

Customize:

Replace the red mark links to your own link EX: ( https://www.youtube.com/watch?v=7DrECLTJdM8) The Title and description must be changed depending on your movie title and information. if you want more video list below, just copy one of the line starting with { and the end is} and paste it below as much as you want. 

Example: {"file": "//ok.ru/videoembed/1241617730233","title": " Ep 01-02","description": ""}

{"file": "//ok.ru/videoembed/1241617730233","title": " Ep 01-02","description": ""}

{.................................................................................}

{.................................................................................}

{.................................................................................}

{.................................................................................}

Watch one YouTube below to clear! 


Share on Google Plus

About KhmerueTeams Official

Welcome to KhmerueTeams Officials Blogger. I am Mr. Chhuye The Admin of this blogger. If you have quetion contact me : +855968555664 / +855976235033 or watch my video on ​

YOUTUBE HERE
    Blogger Comment
    Facebook Comment

2 comments:

  1. AnonymousOctober 22, 2022 at 12:23 AM

    Hola amigo genial tu post pero quisiera poner otro videos y no solo los de vimeo y youtube sino este tipo de video: https://sbanh.com/e/fppno7pohw8v
    como puedo hacer para que reproduzca ese video?

    ReplyDelete
  2. AnonymousOctober 22, 2022 at 12:24 AM

    Hola amigo genial tu post pero quisiera poner otro videos y no solo los de vimeo y youtube sino este tipo de video: https://sbanh.com/e/fppno7pohw8v
    como puedo hacer para que reproduzca ese video?
    te dejo mi correo para tu respuesta: correodemoseis@gmail.com

    ReplyDelete

Subscribe to: Post Comments ( Atom )