JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<link rel="stylesheet" href="https://css-tricks.github.io/AnythingSlider/css/anythingslider.css">
<script src="https://css-tricks.github.io/AnythingSlider/js/jquery.anythingslider.js"></script>
<script src="https://css-tricks.github.io/AnythingSlider/js/jquery.easing.1.2.js"></script>
<script src="https://css-tricks.github.io/AnythingSlider/js/swfobject.js"></script>
<script src="https://css-tricks.github.io/AnythingSlider/js/jquery.anythingslider.fx.js "></script>
<script src="https://css-tricks.github.io/AnythingSlider/js/jquery.anythingslider.video.js "></script>
<ul id="slider">
  <li><img src="https://placekitten.com/300/200" alt="" /></li>
  <li><img src="https://placehold.it/300x200" alt="" /></li>
  <li><img src="https://placebear.com/300/200" alt="" /></li>
  <li>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/DD1ir1Hsdbw" frameborder="0" allowfullscreen></iframe>
  </li>
</ul>

CSS

ul#slider,
 ul#slider li {
   width: 500px;
   height: 500px;
   list-style: none;
 }

JavaScript

$(function() {
  $.fn.anythingSliderVideo.services.youtube1.play = function(base, $vid, index) {
    if ($vid.length && base.video.list[index].player) {
      base.video.list[index].player.playVideo();
    }
  };
  $('#slider')
    .anythingSlider({
      autoPlay: true,
      buildNavigation: false,
      onSlideComplete: function(slider) {
        slider.video.control('play');
      }
    })
    .anythingSliderVideo();
});