JSFiddle - React, Tailwind, and code Playground

HTML

<main>
    
        
        
            
                    <article class="workshopentry">
        <header class="left">
            <h1><a href="/workshop/3">Video and video controls test</a></h1>
            <h5>Started: 2013-04-28</h5>
            <h5>Completed: 2013-11-09</h5>
            <ul>
               <li><a href="/workshop/HTML5">HTML5</a></li>
               <li><a href="/workshop/Test">Test</a></li>
               <li><a href="/workshop/Video">Video</a></li>
            </ul>
        </header>
        <div class="right">
            <p>Inital test of videos that shouldnt make it out of testing.</p>

    <video width="320" height="240">
        <source src="/assets/video/2011BristoGoldcoastsmall.ogg" type="video/ogg">
    </video>



    <video width="320" height="240" controls>
        <source src="/assets/video/2011BristoGoldcoastsmall.webm" type="video/webm">
    </video>



    <video width="640" height="426" controls data-poster="/assets/video/cityposter.svg">
        <source src="/assets/video/citysmall.ogv" type="video/ogg">
        <source src="/assets/video/citysmall.webm" type="video/webm">
    </video>


        </div>
    </article>

            
		
	
    </main>
	<p class="ancillaryright"><a href="/workshop">Back to the workshop.</a></p>
</div>
		<footer>
			<p>Unless otherwise specified, this work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/au/">Creative Commons Attribution 3.0 Australia License</a>.</p>
		</footer>

JavaScript

$(document).ready(function () {
    "use strict";
    var videos = $("video");

    function isVideoPlaying(video) {
        return (video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA);
    }

    function playPause(video, playPauseButton) {
        if (!isVideoPlaying(video)) {
            video.pause();
            playPauseButton.src = "/media/site-images/smallplay.svg";
        } else {
            video.play();
            playPauseButton.src = "/media/site-images/smallpause.svg";
        }
    }

    function detatchOnEnterListener(vidBox) {
        $(vidBox).off("mouseenter");
    }

    $(videos).each(function () {
        var video = $(this);
        var videoContainer;
        var controlsBox;
        var playPauseButton;
        var progressBar;
        var fullscreenButton;
        var customPoster;

        this.controls = false;

        // Setup the div container for the video
        videoContainer = document.createElement("div");
        videoContainer.setAttribute("class", "videoContainer");
        $(this).wrap(videoContainer);

        // Setup controls box for the videos
        controlsBox = document.createElement("div");
        controlsBox.setAttribute("class", "videoControls");
        $(controlsBox).css({opacity: 0});   // Start invisible, better here than CSS

        // Setup play/pause button
        playPauseButton = document.createElement("img");
        playPauseButton.src = "/media/site-images/smallplay.svg";
        playPauseButton.setAttribute("class", "playPauseButton");

        $(playPauseButton).on("click", (function (vid, playPauseButton) {
            return function () {
                playPause(vid, playPauseButton);
            };
        }(this, playPauseButton)));

        controlsBox.appendChild(playPauseButton);

        // Setup the progress display
        progressBar = document.createElement("progress");
        progressBar.max = 1;  // Without these values the progress bar...