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 .

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 .icon-video{display:none;}

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

xxxxxx is your video short code.


  • video title1

  • video title2

  • video title3

  • video title4

  • video title5

inset js code and JQUERY file in your page.

//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");

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

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin


:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: