Search code examples
javascripthtmlcssresponsive-designowl-carousel

Owl Carousel is not responsive

I tried to make a responsive owl carousel but it is not working for some reason. It works with images but it does not work with Youtube videos. Can someone help me?

<div id="owl-demo" class="owl-carousel owl-theme">
    <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/WZwr2a_lFWY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/dLymsYC7Kmo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/M46FRJsB0Qw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/6eEZ7DJMzuk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/nRYCLOTRAK4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/eDEFolvLn0A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/nnVjsos40qk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/QqsvrV1_XEA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/G8GaQdW2wHc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div class = "item"><iframe width="560" height="315" src="https://www.youtube.com/embed/0nPlIi685DU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
                    
</div>

JavaScript

<script type = "text/javascript">
        $(document).ready(function() {
         
          $("#owl-demo").owlCarousel({
            navigation : true,
            autoWidth: true,
            loop: true,
            responsiveClass: true,
            center: true,
            merge: true,
            responsive:{
                0:{
                    items: 1
                    },
                    
                600:{
                    items: 2
                    },
                
                900:{
                    items: 3
                    }
                }
            
          });
         
        });
    </script>

CSS

#owl-demo .item{
  margin: 10px;
  border-radius: 3px;

}

This is how I want it to be

enter image description here

But mine is like this, not resizing properly with the change of the browser width

enter image description here

Solution

  • Why did you put iframes in the corousel. You don't like read the documentation? ))) Look here: https://owlcarousel2.github.io/OwlCarousel2/demos/video.html To add video into carousel just put <a class="owl-video" href="_straight URL from YouTube, Vimeo, or vzaar"></a>.

    Ok try this:

    <div id="owl-demo" class="owl-carousel owl-theme">
    <div class="item-video"><a class="owl-video" href="https://youtu.be/WZwr2a_lFWY"></a></div>
    <div class="item-video"><a class="owl-video" href="https://youtu.be/dLymsYC7Kmo"></a></div>
    <div class="item-video"><a class="owl-video" href="https://youtu.be/M46FRJsB0Qw"></a></div>
    <div class="item-video"><a class="owl-video" href="https://youtu.be/nRYCLOTRAK4"></a></div>
    <div class="item-video"><a class="owl-video" href="https://youtu.be/eDEFolvLn0A"></a></div>
    <div class="item-video"><a class="owl-video" href="https://youtu.be/nnVjsos40qk"></a></div>
    <div class="item-video"><a class="owl-video" href="https://youtu.be/QqsvrV1_XEA"></a></div>
    <div class="item-video"><a class="owl-video" href="https://youtu.be/G8GaQdW2wHc"></a></div>
    <div class="item-video"><a class="owl-video" href="https://youtu.be/0nPlIi685DU"></a></div>   
</div>

    This:

    <script type = "text/javascript">
jQuery(document).ready(function($) { 
  $("#owl-demo").owlCarousel({
    navigation : true,
    loop: true,
    center: true,
    merge: true,
    video:true,
    responsive:{
        0:{
            items: 1
            },            
        600:{
            items: 2
            },        
        900:{
            items: 3
            }
        }    
    }); 
});
</script>

    And this:

    <style>
.item-video {height: 300px;}
</style>

    Result here: https://view.abramovaleksandr.com/