JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/christian-seifert/files/master/jquery.anythingslider.video.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/CSS-Tricks/AnythingSlider/master/css/anythingslider.css">
<script src="https://rawgithub.com/CSS-Tricks/AnythingSlider/master/js/jquery.anythingslider.js"></script>
<div id="slider1">
    <div class="videoContainer">
        <iframe height="100%" width="100%" src="//www.youtube.com/embed/9hGoTnTCyRo" frameborder="0"></iframe>
    </div>
    <div class="videoContainer">
        <iframe height="100%" width="100%" src="//www.youtube.com/embed/gB0sJA6SK5I" frameborder="0"></iframe>
    </div>
    <div class="videoContainer">
        <iframe height="100%" width="100%" src="//www.youtube.com/embed/dLA76V-e2TM" frameborder="0"></iframe>
    </div>
</div>
<input name="videoUrlOne" id="sliderOneInput" type="text" placeholder="embedded URL" />
<input type = "button" id="sliderOneAdd" value="Add Video"/>
<input type = "button" id="sliderOneRemove" value="Delete Video"/>
<div id="slider2">
    <div class="videoContainer">
        <iframe height="100%" width="100%" src="//www.youtube.com/embed/TTMNqh_eGcU" frameborder="0"></iframe>
    </div>
</div>
<input name="videoUrlTwo" id="sliderTwoInput" type="text" placeholder="embedded URL" />
<input type = "button" id="sliderTwoAdd" value="Add Video"/>
<input type = "button" id="sliderTwoRemove" value="Delete Video"/>

CSS

div#slider1, ul#slider1 div {
    width: 300px;
    height: 200px;
    list-style: none;
}

div#slider2, div#slider2 div {
    width: 300px;
    height: 200px;
    list-style: none;
}

.anythingSlider .arrow span {
    display: block;
    color: #000;
}

JavaScript

$("#slider1, #slider2").anythingSlider({
    expand: false,
    resizeContents: false,
    mode: "fade",
    autoPlay: false,
    delay: 5000,
    infiniteSlides: false,
    buildArrows         : true,     // If true, builds the forwards and backwards buttons 
    buildNavigation     : false,    // If true, builds a list of anchor links to link to each panel 
    buildStartStop      : false,    // If true, builds the start/stop button 
    resumeDelay         : 2500,     // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds). 
    animationTime       : 800,      // How long the slideshow transition takes (in milliseconds) 
    // Callbacks 
    onBeforeInitialize  : function(e, slider) {}, // Callback before the plugin initializes 
    onInitialized       : function(e, slider) {},
    onShowStart         : function(e, slider) {}, // Callback on slideshow start 
    onShowStop          : function(e, slider) {}, // Callback after slideshow stops 
    onShowPause         : function(e, slider) {}, // Callback when slideshow pauses 
    onShowUnpause       : function(e, slider) {}, // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls 
    onSlideInit         : function(e, slider) {}, // Callback when slide initiates, before control animation 
    onSlideBegin        : function(e, slider) {}, // Callback before slide animates 
    onSlideComplete     : function(slider) {},    
})	//AnythingSlider 
.anythingSliderVideo({
    // video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex
    videoId         : 'asvideo',
    // this option replaces the `addWmodeToObject` option in the main plugin
    wmode           : "opaque",
    // auto load YouTube api script
    youtubeAutoLoad : true,
    // YouTube iframe parameters, for a full list see:
    // https://developers.google.com/youtube/player_parameters#Parameters
    youtubeParams   : {
        modestbranding : 1,
        autohide :...