JSFiddle - React, Tailwind, and code Playground

HTML

<div class="GIFarea"><img src="http://curtiswiklundphoto.com/images/super-secret-startup/sss-gif.png" id="clickablearea" data-animation="gif" style="width: 100%; max-width: 799px;" /></div>

CSS

.preloadGIF {
	background: url(http://curtiswiklundphoto.com/images/super-secret-startup/sss-gif.gif) no-repeat;
display: none;
}
	
  


/* Animated GIF controls */
 
.GIFarea {
	position: relative;
	margin-left:auto;
	margin-right:auto;
}
 
.GIFarea div {
	font-size: smaller;
	font-weight: 700;
	padding: 5px;
	pointer-events: none; 
}
 
.GIFplaying {
display: none;
	position: absolute;
	top: 7px;
	right: 7px;
	background-color: red;
	color: white;
	visibility: hidden;
	opacity: 0;
	transition: opacity 1s, visibility 1s;
}
 
.GIFarea .GIFplaying {
	visibility: hidden;
	opacity: 0;
	transition: opacity 1s, visibility 1s;
	transition-delay: 0s;
}
 
.GIFarea:hover .GIFplaying {
	visibility: visible;
	opacity: 100;
	transition: opacity 1s, visibility 1s;
	transition-delay: .5s;
}
 
.GIFstopped {
display: none;
    position: absolute;
	background-color: green;
	color: white;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

JavaScript

(function() {
	const images = document.querySelectorAll('img[data-animation="gif"]');
	[].forEach.call(images,function(image) {
		image.addEventListener('click', toggleImage);
		image.insertAdjacentHTML('afterend', '<div class="GIFstopped"><span>Play GIF</span></div>');
	});
 
	function toggleImage() {
      
		var myImage = this;
		var ext2 = myImage.getAttribute('data-animation');
		var ext1 = myImage.src.substr((~-myImage.src.lastIndexOf(".") >>> 0) + 2);
		if (ext2 == "gif") {
			    toggleItem(myImage, ext1, ext2, 'GIFplaying', 'Click to stop'); setTimeout(myFunction, 9700);

		} else {
			toggleItem(myImage, ext1, ext2, 'GIFstopped', 'Play GIF');
		}
	}
 
function myFunction() {
    document.getElementById("clickablearea").click();
}
 
	function toggleItem(myImage, ext1, ext2, className, text) {
		var myText = myImage.nextElementSibling;
		myImage.src = myImage.src.replace('.'+ext1, '.'+ext2);
		myImage.setAttribute('data-animation', ext1);
		myText.className = className;
		myText.innerHTML = text;
	}

})();