JSFiddle - React, Tailwind, and code Playground

by mrmartineau

HTML

<div class="wrapper">
			<div class="video-container">
				<div id="videoDiv">Loading...</div>
				<div class="video-choice"><div class="video-choice-pin" style="left:-10%;"></div></div>
			</div>

			<div class="controls-container">
				<button class="play-pause is-paused">Play</button>
				<button class="choose">Choose this point</button>
				<button class="submit">Submit your choice</button>
			</div>
		</div>
		<script src="//www.google.com/jsapi" type="text/javascript"></script>
		<script type="text/javascript">
			google.load("swfobject", "2.1");
		</script>

CSS

.wrapper {
	width: 480px;
	margin: 0 auto;
}

.video-container {
	width: 480px;
	position: relative;
}

.video-choice {
	height: 30px;
	background-color: rgba(255,255,255, 0.3);
	border: 1px solid #ddd;
}
.video-choice-pin {
	position: absolute;
	width: 1px;
	height: 30px;
}

.choose, .submit {
	display: none;
}

JavaScript

$(function() {
	$('.play-pause').on('click', function(){
		if ($(this).hasClass('is-paused')) {
			playVideo();
			$(this).text('Pause').removeClass('is-paused');
			$('.submit, .choose').hide();
		} else {
			pauseVideo()
			$(this).text('Play').addClass('is-paused')
			$('.choose').show();
		}
	});

	$('.choose').on('click', function(){
		var leftPos = ((ytplayer.getCurrentTime() / ytplayer.getDuration()) * 100) +'%';
		$('.video-choice-pin').css({
			left: leftPos,
			backgroundColor: '#000'
		});
		$('.submit').show();
	});

	$('.submit').on('click', function(){
		$('.play-pause, .choose').hide();
		alert('Your chosen Moment is at ' + ytplayer.getCurrentTime() + ' seconds');
	});
});
			/*
			 * Chromeless player has no controls.
			 */

			// Update a particular HTML element with a new value
			function updateHTML(elmId, value) {
				document.getElementById(elmId).innerHTML = value;
			}

			// This function is called when an error is thrown by the player
			function onPlayerError(errorCode) {
				alert("An error occured of type:" + errorCode);
			}

			// This function is called when the player changes state
			function onPlayerStateChange(newState) {
				updateHTML("playerState", newState);
			}

			// Display information about the current state of the player
			function updatePlayerInfo() {
				// Also check that at least one function exists since when IE unloads the
				// page, it will destroy the SWF before clearing the interval.
				if(ytplayer && ytplayer.getDuration) {
					updateHTML("videoDuration", ytplayer.getDuration());
					updateHTML("videoCurrentTime", ytplayer.getCurrentTime());
					updateHTML("bytesTotal", ytplayer.getVideoBytesTotal());
					updateHTML("startBytes", ytplayer.getVideoStartBytes());
					updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded());
					updateHTML("volume", ytplayer.getVolume());
				}
			}

			// Allow the user to set the volume from 0-100
			function setVideoVolume() {
				var volume =...