JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css">
<!-- 
Stackoverflow Answer by arttronics for SO Question:  http://stackoverflow.com/q/14193404/1195891 
-->

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg" title="Image 1">
  <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
</a>

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"  title="Image 2">
  <img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/>
</a>

<a class="open_fancybox" title="test" href="http://fancyapps.com/fancybox/demo/3_b.jpg">
  <img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/>
</a>

CSS

/* Use this CSS Selector for both play and stop images. Due to image swapping in jQuery, it's not feasible to create separate Play or Stop selectors for styles, as they WILL crossover each other. */

.fancyControl {
  float: right;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  margin-left: 10px; /* This value prevents fancyControl image from touching Title bar. */
}

JavaScript

// We preset this global variable to "play" mode since if the fancyButton callback is ever used, we assume play mode is true.
  // If the fancyButton callback is not used, then this variable becomes irrelevant.
  var fancyControlMode = "play";

  // The fancyPlay function will toggle the currenly stopped show to be in play mode. Image swap is also done and var is updated.
  function fancyPlay(){
    $.fancybox.play(); // This Fancybox API toggles stop OR play. We enter this toggle already in Stop mode, so PLAY will occur.
    $('.fancybox-title .child img').attr('src', 'http://shadowbox-js.com/build/play.png').attr('title', 'Play'); // Image for Play
    fancyControlMode = "play"; // Update the variable to play status.
  }

  // The fancyStop function will toggle the currenly playing show to be in stop mode. Image swap is also done and var is updated.
  function fancyStop(){
    $.fancybox.play(); // This Fancybox API toggles play OR stop. We enter this toggle already in Play mode, so STOP will occur.
    $('.fancybox-title .child img').attr('src', 'http://shadowbox-js.com/build/pause.png').attr('title', 'Pause'); // Image for Stop
    fancyControlMode = "stop"; // Update the variable to stop status.
  }

  // This fancyButton function is envoked by Fancybox afterShow callback.
  // The purpose is to create a single toggle button that also has one of two images to represent the playback mode.
  function fancyButton() {
    
    // Simple console message to note when this function is accessed.
    // Having said that, it's accessed during initial opening as well as auto-playing of Fancybox items.
    // console.log('envoked');
    
    // We check if the current value for this variable is "play" once we enter the fancyButton, else "stop" is assumed.
    // On initial use, play mode is true.
    if (fancyControlMode === "play") {
      
      // This line will add an image to the Fancybox Title bar area which informs the viewer autoPlay is in Play mode.
      //...