JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
<div class="owl-carousel owl-theme">
  <div class="item-video" data-merge="1">
    <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="1">
    <a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a>
  </div>
</div>

CSS

.owl-carousel,
.owl-carousel .item-video {
  height: 300px;
}

JavaScript

function toggleOwlVideos() {
  var currentSlide = document.querySelector(".owl-item.active");
  var playBtn = currentSlide.querySelector(".owl-video-play-icon");
  var frame = currentSlide.querySelector("iframe");
  var loading = Boolean(frame);
  if (playBtn && !loading) {
    playBtn.click();
  }

  if (frame) {
    frame.contentWindow.postMessage("pause", "*");
    frame.contentWindow.postMessage('{"method":"setVolume", "value":0}', '*');
  } else {
    setTimeout(toggleOwlVideos, 300);
  }
}

var owl = $('.owl-carousel').owlCarousel({
  items: 1,
  merge: true,
  loop: true,
  margin: 10,
  video: true,
  lazyLoad: true,
  center: true,
  responsive: {
    480: {
      items: 1
    },
    600: {
      items: 1
    }
  }
});

owl.on('changed.owl.carousel', function(event, a) {
  setTimeout(toggleOwlVideos, 0);
})