Create A Youtube Video Carousel/Slider using jQuery OWL Carousel Plugin

Do you want to add youtube video slideshow on your website to showcase your video gallery or display youtube video Carouselon your website If yes then in this post I am going to share awesome jQuery plugin called OWL Tube. This plugin makes use of the popular Owl Carousel 2 plugin to create a responsive, configurable Youtube playlist carousel from a group of Youtube videos you specify.


Libraries

Load the necessary jQuery library and Owl Carousel plugin in the document.

<link rel="stylesheet" href="../vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="../vendors/owl-carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="../vendors/owl-carousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="../vendors/owl-carousel/assets/owl.theme.green.min.css">
 
<script src="../vendors/jquery/jquery-3.3.1.min.js"></script>
    <script src="../vendors/bootstrap/popper.min.js"></script>
    <script src="../vendors/bootstrap/bootstrap.min.js"></script>
    <script src="../vendors/owl-carousel/owl.carousel.min.js"></script>
 
    <!--owl-tube-file-->
    <script src="../dist/assets/js/owl-tube.min.js"></script>

HTML

Add Youtube videos to the carousel by following structure.

<div class="owl-carousel owl-theme">
        <div class="item">
                <iframe type="text/html" width="720" height="405"
                src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
                frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="item">
                <iframe type="text/html" width="720" height="405"
                src="https://www.youtube.com/embed/eRiyV1Kan24?enablejsapi=1"
                frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="item">
                <iframe type="text/html" width="720" height="405"
                src="https://www.youtube.com/embed/9aipBufoJP8?enablejsapi=1"
                frameborder="0" allowfullscreen></iframe>
        </div>
 
        <div class="item">
                <iframe type="text/html" width="720" height="405"
                src="https://www.youtube.com/embed/flU42CTF3MQ?enablejsapi=1"
                frameborder="0" allowfullscreen></iframe>
        </div>
    </div>



JS

Initialize the OWL Carousel Youtube Plugin to create video slider and done.

$(document).ready(function(){
        var carousel = $('.owl-carousel').owlCarousel({
            items:1,
            loop:1,
            nav:1,
            dots:1
        });
        window.owlTube = $(carousel).owlTube();
 
    });

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by kiaonline. Visit their official github repository for more information and follow for future updates.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.