How to use the youtube video list as slider ?

Step 1:
inset css code in header.php. Before ,or inset style code into style.css .

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
.videobox{border:solid 1px #fff;width:600px;margin:0 auto 0 auto;}
.video-img{width:600px;height:360px;overflow:hidden;box-shadow: 2px 0px 2px #000;}
.video-list{height:140px;padding:15px 0 0 0;width: 600px;box-shadow: 2px 2px 3px #000;}
.video-list li img{opacity: 0.85;}
.video-list li h4{font-size:12px;margin:2px 0;text-align: center;padding: 5px 5px;}
.video-list li{width:115px;height:140px;overflow:hidden;position:relative;float:left;margin:0 5px;cursor:pointer;}
.video-list li .icon-video{position:absolute;left:46px;top:40px;width:44px;height:44px;z-index:99;opacity: 1;}
.video-list li.now .icon-video{display:none;}

step 2:
copy div code in your page.if you are looking to add ,do it.

src="https://www.youtube.com/embed/xxxxxx?feature=oembed"
xxxxxx is your video short code.


step3:
inset js code and JQUERY file in your page.

$(document).ready(function(){
//change video
$(".video-list li").click(function(){
var obj = $(this);
var video_id = obj.attr("video");
var path = obj.attr("id");
var vid = obj.attr("vid");
$(".js_videoCon").hide();
$("#js_videoCon_"+vid).show();
obj.addClass("now").siblings().removeClass("now");
});
});

Aha,Revolution video sliders is here! Just Do it! Now!