Reading Time: 4 minutes

5,364 Views

Inside this article we will see the concept of adding Youtube video slider using jquery video plugin. Adding Image or Video sliders in website is very interesting and also they are attractive for end users.

There are several jquery plugins available which provides the function for Text, Image, Video slider etc. Inside this tutorial we will use jquery Video plugin for adding Youtube Video slider.

Video slider simply means when we play any video from sliding video slides then slider will pause and play video. Once video will complete or user will pause by itself then slider will start automatically moving.

Check this HTML5 Video Slider Plugin.

Learn More –

Let’s get started.

jQuery Video Plugin Files

When we work with jquery video plugin we need these CSS, JS files. You can see the official document for this plugin here.

CSS

http://www.menucool.com/slider/jsImgSlider/themes/6/js-image-slider.css

JS

http://www.menucool.com/slider/jsImgSlider/themes/6/mcVideoPlugin.js

http://www.menucool.com/slider/jsImgSlider/themes/6/js-image-slider.js

Usage

var Slider = new mcImgSlider(sliderOptions);

Create an Application

Create a folder with name video-slider. Create a file index.html into it.

Open index.html and write this complete code into it.

<!DOCTYPE html>
<html>
<head>
    <title>Youtube Video Slider Using jQuery Video Plugin</title>
    <link href="http://www.menucool.com/slider/jsImgSlider/themes/6/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="http://www.menucool.com/slider/jsImgSlider/themes/6/mcVideoPlugin.js" type="text/javascript"></script>
    <script src="http://www.menucool.com/slider/jsImgSlider/themes/6/js-image-slider.js" type="text/javascript"></script>
    
</head>
<body>

    <div id="sliderFrame">
        <h3>Youtube Video Slider Using jQuery Video Plugin</h3>
        <div id="slider">
            <a class="video" href="https://www.youtube.com/watch?v=a3ICNMQW7Ok">
                <b data-src="images/image-slider-2.jpg">Vimeo</b>
            </a>
            <a class="video" href="http://www.youtube.com/watch?v=P0G_2tiivxE">
                <b data-src="images/image-slider-3.jpg">Image Slider</b>
            </a>
            <a class="video" href="https://www.youtube.com/watch?v=a3ICNMQW7Ok" data-autovideo="1">
                <b data-src="images/image-slider-5.jpg">Slide 5</b>
            </a>
        </div>
    </div>

</body>
</html>

Explanation

Inside each anchor tag we can see we have a youtube video url and inside data-src attribute we have an image link which is called a poster/thumbnail image.
mcVideoPlugin.js is jquery video plugin
js-image-slider.js is plugin function attached with selected and other slider options.
When we play any video over slide, slider will stop moving. Once video complete it will then start moving automatically.

Note* : Inside this code snippet we have used css and js links as third party URL. You can download and set it to locally so that it will not open from anywhere.

Application Testing

Open browser and type this –

URL – http://localhost/video-slider/index.html

We hope this article helped you to learn HTML5 Video Slider Using Owl Carousel jQuery Plugin Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.