Step 1:
inset css code in header.php. Before
1 | </head> |
,or inset style code into style.css .
1 2 3 4 5 6 7 8 9 10 11 | *{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.
1 2 | src="https://www.youtube.com/embed/xxxxxx?feature=oembed" xxxxxx is your video short code. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <div class="videobox"> <div class="video-img"> </iframe ID="js_videoCon_1" class="js_videoCon" src="https://www.youtube.com/embed/xxxxxx?feature=oembed" allowfullscreen="" frameborder="0" height="360" width="600"><\iframe> </iframe ID="js_videoCon_2" class="js_videoCon" style="display:none" src="https://www.youtube.com/embed/xxxxxx?feature=oembed" allowfullscreen="" frameborder="0" height="360" width="600"><\iframe> </iframe ID="js_videoCon_3" class="js_videoCon" style="display:none" src="https://www.youtube.com/embed/xxxxxx?feature=oembed" allowfullscreen="" frameborder="0" height="360" width="600"><\iframe> </iframe ID="js_videoCon_4" class="js_videoCon" style="display:none" src="https://www.youtube.com/embed/xxxxxx?feature=oembed" allowfullscreen="" frameborder="0" height="360" width="600"><\iframe> </iframe ID="js_videoCon_5" class="js_videoCon" style="display:none" src="https://www.youtube.com/embed/xxxxxx?feature=oembed" allowfullscreen="" frameborder="0" height="360" width="600"><\iframe> </div> <div class="video-list"> <ul> <li class="now" ID="https://www.youtube.com/embed/xxxxxx?feature=oembed" video="1" vid="1"> <img src="" width="120" height="140"> <img src="" class="icon-video"> <h4>video title1</h4> </li> <li ID="https://www.youtube.com/embed/xxxxxx?feature=oembed" video="2" vid="2"> <img src="" width="120" height="140"> <img src="" class="icon-video"> <h4>video title2</h4> </li> <li ID="hhttps://www.youtube.com/embed/xxxxxx?feature=oembed" video="3" vid="3"> <img src="" width="120" height="140"> <img src="" class="icon-video"> <h4>video title3</h4> </li> <li ID="https://www.youtube.com/embed/xxxxxx?feature=oembed" video="4" vid="4"> <img src="" width="120" height="140"> <img src="" class="icon-video"> <h4>video title4</h4> </li> <li ID="https://www.youtube.com/embed/xxxxxx?feature=oembed" video="5" vid="5"> <img src="" width="120" height="140"> <img src="" class="icon-video"> <h4>video title5</h4> </li> </ul> </div> </div> |
step3:
inset js code and JQUERY file in your page.
1 2 3 4 5 6 7 8 9 10 11 12 | $(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!
