2. Copy the following code from above <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<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>
<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"t>',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&player_id=video_player&autoplay=1").show():v.find("iframe").attr("src",t+"?api=1&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>
៥.5. Put the following code into the Blog Post (HTML View)
<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>
Thank you, see you later.
Tags:
Blog Tips