CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
user2252219
user2252219

Reputation: 865

Owl Carousel video not responsively resizing

I got the static images to resize but the video doesn't when the browser size is adjusted. This is probably because I've added a width into the script. However, if I just leave videoWidth: true, then the video becomes tiny.

On the website (http://imdarrien.com/work/Kami/kami.html)

https://jsfiddle.net/9NJ2k/6/

Here is the offical demo from the website (http://www.owlcarousel.owlgraphic.com/demos/video.html)

video:true,
videoHeight: 500,
videoWidth: 856, 


.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000;
}

.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url(play_button.png) no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
opacity:1;
transition: all 1s;
}

When videoWidth: false When <code>videoWidth: false</code>

Upvotes: 11

Views: 6727

Answers (2)

Michelle Goodbrand
Michelle Goodbrand

Reputation: 11

I completely agree that the addition of "responsive:true" option and changing the video tag 

width:100%;height:auto

you are able to get video as responsive.

Upvotes: 1

ItzMe_Ezhil
ItzMe_Ezhil

Reputation: 1406

By adding "responsive:true" option and changing video tag width 100%;height:auto you can get video as responsive.

Demo: http://jsfiddle.net/nLz17fcv/5/

script:

 $(document).ready(function() {
   $("#carousel").owlCarousel({
     items:1,
     autoPlay : 5500,
     stopOnHover : true,
     center:true,
     navigation:false,
     pagination:false,
     goToFirstSpeed : 1300,
     singleItem : true,
     autoHeight : true,
     responsive: true,
     responsiveRefreshRate : 200,
     responsiveBaseWidth: window,      
     video:true,    
     transitionStyle:"fade",
     onTranslate: function() {
       $('.owl-item').find('video').each(function() {
         this.pause();
       });
    }
  });
 })

CSS

    .owl-carousel  {width:90%; margin: 0 auto;}
    .owl-carousel img{width:100%;height:auto;}

Upvotes: 9

Related Questions