Youtube Video Gallery Slider

Bài viết này mình sẽ hướng dẫn các bạn tạo silder cho video từ Youtube. Các bạn xem demo bên dưới để hiểu rõ hơn về tiện ích thú vị này

Thêm CSS vào template

.closeButton { background-image: url(https://googledrive.com/host/0Bz_65BAr9KCZcS1GVThYNGE0Q3M/); }
.closeButton:hover { background-position: -30px 0px; }
.jssorn03 div, .jssorn03 div:hover, .jssorn03 .av{background: url(https://googledrive.com/host/0Bz_65BAr9KCZQUJtRTdwcVFHTlU/) no-repeat; overflow:hidden; cursor: pointer;}
.jssorn03 div { background-position: -5px -4px; }
.jssorn03 div:hover, .jssorn03 .av:hover { background-position: -35px -4px; }
.jssorn03 .av { background-position: -65px -4px; }
.jssorn03 .dn, .jssorn03 .dn:hover { background-position: -95px -4px; }

Thêm JS vào template

<script src="https://googledrive.com/host/0Bz_65BAr9KCZcWxsOGlLMXU3RU0" type="text/javascript"></script><script src="https://googledrive.com/host/0Bz_65BAr9KCZajZHY1ZnYzhrTFk/" type="text/javascript"></script><script src="https://googledrive.com/host/0Bz_65BAr9KCZZDNsZlFfNHYwa0E/" type="text/javascript"></script><script type="text/javascript" src="https://googledrive.com/host/0Bz_65BAr9KCZenNyWm5IdjdhTHM/"></script><script>
        jQuery(document).ready(function ($) {
            var options = {
                $AutoPlay: true,                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $DragOrientation: 3,                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
                $AutoPlayInterval: 4000,            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                $PauseOnHover: 3,                   //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 3
                $ArrowKeyNavigation: true,     //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
                $NavigatorOptions: {                //[Optional] Options to specify and enable navigator or not
                    $Class: $JssorNavigator$,       //[Required] Class to create navigator instance
                    $ChanceToShow: 2,               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $ActionMode: 1,                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                    $AutoCenter: 1,                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1,                      //[Optional] Steps to go for each navigation request, default value is 1
                    $Lanes: 1,                      //[Optional] Specify lanes to arrange items, default value is 1
                    $SpacingX: 10,                   //[Optional] Horizontal space between each item in pixel, default value is 0
                    $SpacingY: 0,                   //[Optional] Vertical space between each item in pixel, default value is 0
                    $Orientation: 1                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                }
            };
            var jssor_slider1 = new $JssorSlider$("slider1_container", options);
            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizes
            function ScaleSlider() {
                var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
                if (parentWidth)
                    jssor_slider1.$SetScaleWidth(Math.min(parentWidth, 640));
                else
                    window.setTimeout(ScaleSlider, 30);
            }
            //Scale slider immediately
            ScaleSlider();
            if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
                $(window).bind('resize', ScaleSlider);
            }
            //responsive code end
            //fetch and initialize youtube players
            $JssorPlayer$.$FetchPlayers(document.body);
        });
    </script>

Thêm đoạn slider vào vị trí bạn muốn trong template

<div id="slider1_container" style="height: 390px; left: 0px; position: relative; top: 0px; width: 640px;">
<div style="cursor: move; height: 390px; left: 0px; overflow: hidden; position: absolute; top: 0px; width: 640px;" u="slides">
<div>
<div style="height: 390px; left: 0px; overflow: hidden; position: relative; top: 0px; width: 640px;" u="player">
<iframe frameborder="0" height="390" phandler="ytiframe" phidecontrols="0" scrolling="no" style="z-index: 0;" url="http://www.youtube.com/embed/H7jtC8vjXw8?enablejsapi=1&amp;version=3&amp;playerapiid=ytplayer&amp;fs=1&amp;wmode=transparent" width="640"></iframe>
<div class="videoCover" style="background-color: black; background-image: url(https://googledrive.com/host/0Bz_65BAr9KCZcU1aR1prQ2NlWXc/); background-position: center center; background-repeat: no-repeat; cursor: pointer; display: none; filter: alpha(opacity=40); left: 0px; opacity: .4; position: absolute; top: 0px; z-index: 1;" u="cover">
</div>
<div class="closeButton" style="background-color: black; cursor: pointer; display: none; height: 30px; position: absolute; right: 1px; top: 0px; width: 30px; z-index: 2;" u="close">
</div></div></div><div>
<div style="height: 390px; left: 0px; overflow: hidden; position: relative; top: 0px; width: 640px;" u="player">
<iframe frameborder="0" height="390" phandler="ytiframe" phidecontrols="0" scrolling="no" style="z-index: 0;" url="http://www.youtube.com/embed/QjKO10hKtYw?enablejsapi=1&amp;version=3&amp;playerapiid=ytplayer&amp;fs=1&amp;wmode=transparent" width="640"></iframe>
<div class="videoCover" style="background-color: black; background-image: url(https://googledrive.com/host/0Bz_65BAr9KCZcU1aR1prQ2NlWXc/); background-position: center center; background-repeat: no-repeat; cursor: pointer; display: none; filter: alpha(opacity=40); left: 0px; opacity: .4; position: absolute; top: 0px; z-index: 1;" u="cover">
</div>
<div class="closeButton" style="background-color: black; cursor: pointer; display: none; height: 30px; position: absolute; right: 1px; top: 0px; width: 30px; z-index: 2;" u="close">
</div></div></div>
<div>
<div style="height: 390px; left: 0px; overflow: hidden; position: relative; top: 0px; width: 640px;" u="player">
<iframe frameborder="0" height="390" phandler="ytiframe" phidecontrols="0" scrolling="no" style="z-index: 0;" url="http://www.youtube.com/embed/b-3BI9AspYc?enablejsapi=1&amp;version=3&amp;playerapiid=ytplayer&amp;fs=1&amp;wmode=transparent" width="640"></iframe>
<div class="videoCover" style="background-color: black; background-image: url(https://googledrive.com/host/0Bz_65BAr9KCZcU1aR1prQ2NlWXc/); background-position: center center; background-repeat: no-repeat; cursor: pointer; display: none; filter: alpha(opacity=40); left: 0px; opacity: .4; position: absolute; top: 0px; z-index: 1;" u="cover">
</div>
<div class="closeButton" style="background-color: black; cursor: pointer; display: none; height: 30px; position: absolute; right: 1px; top: 0px; width: 30px; z-index: 2;" u="close">
</div>
</div>
</div>
<div>
<div style="height: 390px; left: 0px; overflow: hidden; position: relative; top: 0px; width: 640px;" u="player">
<iframe frameborder="0" height="390" phandler="ytiframe" phidecontrols="0" scrolling="no" style="z-index: 0;" url="http://www.youtube.com/embed/YbT0xy_Jai0?enablejsapi=1&amp;version=3&amp;playerapiid=ytplayer&amp;fs=1&amp;wmode=transparent" width="640"></iframe>
<div class="videoCover" style="background-color: black; background-image: url(https://googledrive.com/host/0Bz_65BAr9KCZcU1aR1prQ2NlWXc/); background-position: center center; background-repeat: no-repeat; cursor: pointer; display: none; filter: alpha(opacity=40); left: 0px; opacity: .4; position: absolute; top: 0px; z-index: 1;" u="cover">
</div>
<div class="closeButton" style="background-color: black; cursor: pointer; display: none; height: 30px; position: absolute; right: 1px; top: 0px; width: 30px; z-index: 2;" u="close">
</div>
</div>
</div>
</div>
<div class="jssorn03" style="bottom: 6px; left: 6px; position: absolute;" u="navigator">
<div style="color: white; font-size: 12px; height: 21px; line-height: 21px; position: absolute; text-align: center; width: 21px;" u="prototype">
<numbertemplate></numbertemplate></div>
</div>
</div>

Được tô màu vàng là ID của video youtube

Nguồn http://www.jssor.com