JSFiddle - React, Tailwind, and code Playground

by Josué López

HTML

<video id="video" autoplay loop poster="https://c4.staticflickr.com/8/7493/15886917551_deec049755_n.jpg">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mmov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>
Video courtesy of 
<a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

CSS

video{
    width: 640px;
}
p{
}

JavaScript

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

$('#video').clickToggle(function() {
    //alert('First handler: ' + $(this).text());
    this.pause();
}, function() {
    //alert('Second handler: ' + $(this).text());
    this.play();
});

/*
$('#video').on('click', function(){
    this.play(); 
});
*/