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

Could you try moving the `div.goover` after `video` and then set `video`'s `position: absolute` and `z-index: -1` — lofihelsinki, Mar 24 '17 at 09:03
I tried it in both mobile uc and pc uc, it worked well. Which edition of uc browser are you using? — blackmiaool, Mar 24 '17 at 15:58
I believe this is related to https://stackoverflow.com/questions/40062990/video-refuse-to-obey-css-rule-in-mobile-ucbrowser and https://stackoverflow.com/questions/45720720/video-plays-over-top-of-menu-on-uc-mobile-browser?noredirect=1&lq=1 which have yet to be answered. If you were able to find a solution for overlaying content above playing video on UC please let us know @Carlos, thanks. — Carlos Pinto, Apr 07 '19 at 05:57

score 5 · Answer 1 · edited Jun 20 '20 at 09:12

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.

Is this working fine when video is in play mode? because UC browser replace video player with their player that has highest priority — Jitender, Mar 31 '17 at 04:38
Yes it works, I've added the autoplay attribute and tested it in UC-Browser — Antoine Thiry, Mar 31 '17 at 07:22
It is not working on mobile UC browser. I should have mention it but anyways thanks for you valuable effort — Jitender, Mar 31 '17 at 11:10

user966660 · Answer 2 · 2017-03-30T22:10:03.367

How about this:
https://jsfiddle.net/zpjsz8g8/1/

.test { position: relative }
.goover {
    position: absolute;
    background: #ff0000;
    top: 0;
    bottom: 0;
    left: 0;
    /*right:0px*/
    width: 400 px;
    z - index: 1;
}

or

var videoContainer = document.getElementsByTagName('video')[0];
var goover = document.getElementsByClassName('goover')[0];

goover.style.height = videoContainer.getBoundingClientRect().height + 'px';
goover.style.width = videoContainer.getBoundingClientRect().width + 'px'

Overlap div over html5 video player issue in UC browser

2 Answers2