How to use the youtube video list as slider ?

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!

avatar

发表评论

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