carousel Flickity v2

Question

i use carousel with flickity plugin but it's seems to be not working as expected

<!-- Flickity HTML init -->
<div class="carousel"
  data-flickity='{ "wrapAround": true }'>
  <div class="carousel-cell">                    
      <video src="#" poster="https://assets.codepen.io/7687097/internal/avatars/users/default.png?"></video>
  </div>
  <div class="carousel-cell">
     <video src="#" poster="https://assets.codepen.io/7687097/internal/avatars/users/default.png?"></video>
  </div>
  <div class="carousel-cell">
      <video src="#" poster="https://assets.codepen.io/7687097/internal/avatars/users/default.png?"></video>
  </div>
  <div class="carousel-cell">
     <video src="#" poster="https://assets.codepen.io/7687097/internal/avatars/users/default.png?"></video>
  </div>
  <div class="carousel-cell">
     <video src="#" poster="https://assets.codepen.io/7687097/internal/avatars/users/default.png?"></video>
  </div>

</div>

/* external css: flickity.css */

* {
  box-sizing: border-box; 
}


.carousel-cell {
  width: 66%;
  margin-right: 10px;
  border-radius: 5px;
}
.carousel-cell>video{
  max-width:100%;
}

i was expecting some thing like warp and free scroleable ,

and here you go , i end up like this , the end result is something i was expecting . and those carousel height was to heigh that i had to zoom out the page enter image description here