JSFiddle - React, Tailwind, and code Playground

HTML

<div id="video">
  <script src="https://fast.wistia.com/embed/medias/wd2eroj8k3.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
  <div class="wistia_responsive_padding" style="padding: 56.25% 0 0 0; position: relative;">
    <div class="wistia_responsive_wrapper" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;">
      <div class="wistia_embed wistia_async_wd2eroj8k3 videoFoam=true" style="height: 100%; position: relative; width: 100%;">
        <div class="wistia_swatch" style="height: 100%; left: 0; opacity: 0; overflow: hidden; position: absolute; top: 0; transition: opacity 200ms; width: 100%;">               <img style="filter: blur(5px); height: 100%; object-fit: contain; width: 100%;" src="https://fast.wistia.com/embed/medias/wd2eroj8k3/swatch" alt="" aria-hidden="true" />
        </div>
      </div>
    </div>
  </div>
</div>
<div id="countdowntimer">
  <p class="left normaltext countdowntext">Your exclusive invitation will be unlocked in <span class="countdowntimerspan"><span id="minutesleft">16</span>:<span id="secondsleft">50</span></span></p>
  <p class="stopwatchscreen"><span id="minutes">00</span>:<span id="seconds">00</span>:<span id="tens">00</span></p>
</div>
<div id="hiddencontentunlockedbytimer">
  <p>Hidden content here</p>
</div>

CSS

#video {
  max-width: 400px;
}
#countdowntimer {
    background: #fafafa;
    padding: 20px;
    text-align: center;
    border: 3px solid #b81937;
    border-radius: 5px;
    margin: 40px 20px;
    font-size: 24px;
    box-shadow: 5px 5px 10px #aaa;
}
#hiddencontentunlockedbytimer {
    display: none;
}

JavaScript

jQuery(document).ready(function() {
		console.log('The page is now loaded');
		var Interval;
		var minutes = 0; 
		var seconds = 0; 
		var tens = 0; 
		var appendTens = document.getElementById('tens');
		var appendSeconds = document.getElementById('seconds');
		var appendMinutes = document.getElementById('minutes');
		// make variables for how much time needs to pass before the video is finished (or when the hidden content will be revealed)
		var minutesUntilFinished = 16; // change this
		var secondsUntilFinished = 50; // change this
		// make variables for the countdown timer
		var appendSecondsCD = document.getElementById('secondsleft');
		var appendMinutesCD = document.getElementById('minutesleft');
		
		// This is the full screen button. Do nothing when this is clicked
		var wistiaFullScreenButton = document.querySelector('#wistia_grid_29_main button.w-vulcan-v2-button.w-css-reset.w-css-reset-tree.w-css-reset-button-important');
	
		// find the things that will start and pause the Wistia video
		var wistiaBigPlayButton = document.querySelector('#wistia_grid_29_main button.w-big-play-button.w-css-reset-button-important.w-vulcan-v2-button');
		var wistiaVideoArea = document.querySelector('#wistia_grid_29_main .w-vulcan--background.w-css-reset');
		
		// test if different parts of the Wistia video were clicked	
		if(wistiaFullScreenButton) {
			console.log('The full screen button was found');
			document.querySelector('#wistia_grid_29_main button.w-vulcan-v2-button.w-css-reset.w-css-reset-tree.w-css-reset-button-important').addEventListener('click', function() {
				console.log('The Wistia full screen button was clicked');
			});
		} else {
			console.log('The full screen button was NOT found');
		}
		if(wistiaBigPlayButton) {
			console.log('The big Wistia play button was found');
			document.querySelector('#wistia_grid_29_main button.w-big-play-button.w-css-reset-button-important.w-vulcan-v2-button').addEventListener('click', function() {
				console.log('The...