JSFiddle - React, Tailwind, and code Playground
HTML
<div id="videodiv"></div>
CSS
#videodiv {
width:100px;
height:100px;
background-color:green;
cursor : pointer;
}
JavaScript
// Bind the click event to the body - any static parent container will do
$('body').on('click', function (e) {
// Fire the callback if the click was in the top 100px by 100px
if (e.pageX <= 100 && e.pageY <= 100) {
// Prevent crazy animations and redundant handling
$(this).off('click');
// Scale the video to the appropriate size
$('#videodiv').animate({
width: '250px',
height: '250px'
}, 1000);
}
});