Overlap div over html5 video player issue in UC browser

Question

Is that possible to overlap div element over HTML5 video player in UC browser.

<div class="test">
  <div class="goover"></div>
  <video width="400" controls>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">`
    Your browser does not support HTML5 video.
  </video>
</div>

fiddle

Answer 1

I assume here you want your div to be the same size as your video. This thread has a pretty nice answer for you.

setInterval(function() {
  var width = $("#vid").width();
  var height = $("#vid").height();
  $(".goover").css({
    'width': width,
    'height': height
  });
}, 10);

.test{
   position:relative
 }

.goover{
  width: 2px;
  height: 2px;
  border: solid 2px red;
  background: rgba(255,0,0,0.8);
  position: absolute;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="goover"></div>
  <video width="400" id="vid" controls autoplay>         
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>

I modified the snippet a little bit to match yours better. And I also put a little of transparency in the red background so you can see that the div is overlapping over the video.

EDIT :

Tested on UC-Browser V6.1.2015.1007 (latest release for now) and it works just fine.

EDIT2 :

The controls weren't hidden in UC-Browser, fixed it in css by adding the z-index.

EDIT3 :

I've added the autoplay attribute on the video tag to see it working while in play mode.