JSFiddle - React, Tailwind, and code Playground

by Tintu Raju

HTML

<video autoplay="true" id="videointro" src="http://www.w3schools.com/html/mov_bbb.mp4">
  
</video>

CSS

.paused{
   cursor:url(http://cur.cursors-4u.net/games/gam-13/gam1232.png), auto;
}

.playing{
  cursor:url(http://cur.cursors-4u.net/cursors/cur-1/cur1.png),auto;
}

JavaScript

jQuery(document).ready(function() {
 
 jQuery("#videointro").click(function(){
    (jQuery(this)[0].paused)?jQuery(this)[0].play():jQuery(this)[0].pause();
    if((jQuery(this)[0].paused))
     jQuery(this).addClass("paused").removeClass("playing");
    else
     jQuery(this).addClass("playing").removeClass("paused");
 });
 
 jQuery("#videointro").hover(function(event) {
 
		if((jQuery(this)[0].paused))
     jQuery(this).addClass("paused").removeClass("playing");
    else
     jQuery(this).addClass("playing").removeClass("paused");
 
        if(event.type === "mouseenter") {
            jQuery(this).attr("controls", "");
        } else if(event.type === "mouseleave") {
            jQuery(this).removeAttr("controls");
        }
    });

});