Create A Youtube Video Carousel With OWL Carousel Plugin

The jQuery OWL Tube 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.

Licenced under the GPL 3.

How to use it:

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

<!-- Stylesheet -->
<link rel="stylesheet" href="/path/to/owl.carousel.min.css">
<link rel="stylesheet" href="/path/to/owl.theme.default.min.css">
<link rel="stylesheet" href="/path/to/owl.theme.green.min.css">
<!-- JavaScript -->
<script src="/path/to/jquery-3.3.1.min.js"></script>
<script src="/path/to/owl.carousel.min.js"></script>

2. Download and load the minified version of the jQuery OWL Tube plugin after jQuery.

<script src="/dist/assets/js/owl-tube.min.js"></script>

3. Insert Youtube videos to the carousel following the markup structure as these:

<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>

4. Initialize the Youtube playlist carousel and done.

var carousel = $('.owl-carousel').owlCarousel({

    // more options: 
    // https://www.jqueryscript.net/slider/Fully-Responsive-Mobile-friendly-jQuery-Carousel-Plugin-Owl-Carousel-2.html
    items:1,
    loop:1,
    nav:1,
    dots:1

  });
  
 window.owlTube = $(carousel).owlTube();

5. Available configurations for the Youtube playlist carousel.

$(carousel).owlTube({
  width:640,
  height:340,
  autoplay:1, // 1 = autoplay
  loop:1, 
  controls: 1,
  iv_load_policy:3,
  modestbranding:1,
  rel:0,
  showinfo:0
});

About Author:

Author: kia

Website: https://dialogo.digital/public/projects/owl-tube/example/

---

This awesome jQuery plugin is developed by kiaonline. For more Advanced Usages, please check the demo page or visit the official website.