JezK
Edit File: videocarousel.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="Airsohoo"> <meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Internship</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <link rel="stylesheet" type="text/css" media="all" href="css/styles_slider.css"> <!-- Bootstrap Core CSS --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Theme CSS --> <link href="css/freelancer.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/responsiveCarousel.min.js"></script> <script src="js/owl.carousel.js"></script> </head> <body> <!-- Set up your HTML --> <div class="owl-carousel owl-theme"> <div class="item-video" data-merge="3"><a class="owl-video" href="https://vimeo.com/23924346"></a></div> <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div> <div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div> <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=oy18DJwy5lI"></a></div> <div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=H3jLkJrhHKQ"></a></div> <div class="item-video" data-merge="3"><a class="owl-video" href="https://www.youtube.com/watch?v=g3J4VxWIM6s"></a></div> <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=0fhoIate4qI"></a></div> <div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=EF_kj2ojZaE"></a></div> </div> </body> <script> $('.owl-carousel').owlCarousel({ items:1, merge:true, loop:true, margin:10, video:true, lazyLoad:true, center:true, responsive:{ 480:{ items:2 }, 600:{ items:4 } } }) </script> </html>