JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <video id="vid" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" width="500" heigh="400" preload="auto" controls></video>
    <img id="image" src="http://www.gritengine.com/luaimg/circle.png" />
</div>

CSS

#image {
    position: absolute;
    display: none;
}
#vid {
    position: absolute;
}
div {
    width:100%;
}

JavaScript

$("#vid").click(function (e) {

    //height and width of the container
    var height = $("#pcVideo").height();
    var width = $("#pcVideo").width();

    //get click position inside container
    var relativeX = e.pageX - this.offsetLeft;
    var relativeY = e.pageY - this.offsetTop;

    $('#image').css(
        "left", relativeX - 25);
    $('#image').css(
        "top", relativeY - 25);
    $('#image').show();
    //overlay
    var video = document.getElementById('vid');

    video.pause();
});