jQuery Overlay Image on HTML5 Video

Question

I am trying to build a small utility where someone can start watching an HTML5 video (not YouTube - this will stream from the same server the site is hosted on), click in a specific area of the video, have it pause and put a small circle on the video where they clicked. Once that occurs, a small window will pop up so the user can comment indicating why they clicked there (something wrong in the video, etc.).

The basic HTML structure is this:

<div id="videoContainer" style="margin-left: auto; margin-right: auto; height: 550px; width: 950px; background-color: #fff">        	
    <video id="pcVideo" src="fvb0375.mov" style="margin-left: auto; margin-right: auto; height: 550px; width: 950px; display:inline;" preload="auto" controls></video>
</div>

The custom styling can be ignored - that was just to center the video on the screen with a generic height/width that won't be used later. The JS on the page (to handle when the video is clicked) is this:

$("#pcVideo").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;

  //overlay
  var overlay = $("<div height='75' width='75' class='overlay'/>");
  overlay.offset({
    top: relativeY,
    left: relativeX
  });
  var circle = $("<img/>");
  circle.attr('src', 'circle.png');
  overlay.append(circle);

  $("#videoContainer").append(overlay);

  video.pause();
});

As it stands, the video pauses fine, but the image shows up below the video. If I hide the video, the image pops in right where it is supposed to, so what I've realized is it is applying correctly, but for some reason the video is considered a block-level element, so anything in its realm gets bumped to the "next line" as it were, thus throwing positioning off, like so:

Video shown, circle is below container:

Video hidden, circle shows in appropriate spot:

I've tried z-index with CSS, tried absolute/relative positioning and nothing seems to work to get this thing over top of the video.

Any ideas?

Answer 1

Check out this fiddle.

I have used a sample video and a sample circular image for testing purpose.

Initially the image is hidden.

When you click on the video, the image appears at the position where the click is done and the video pauses.

I hope this helps.

Here is the snippet.

$("#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();
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>