Div on top of ViewRight-player

Question

The green div at the bottom of the page is overlapped by the player as soon as the player loads.

I've tried setting wmode to 'transparent' in both the object tag and the param tag, but that doesn't help.

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<script type="text/javascript">
 function changeChannel(url, chanid)
  {
  var player = document.getElementById('ViewRightControl');
  var video = document.getElementById('video');
  if (video != null)
  {
    video.src = url;
    video.load();
    video.play();
  }
  else if (player != null)
  {
    player.Close();
    player.Open(url, false);
  }
    if(chanid != 0)
    {
      update(chanid);
    }
    else
    {
      tvclear();
    }

}

function update(channelid) {
  $.getJSON('api.php', function(data) {
  console.log(data[channelid][0]);

  $('.now').html("<strong>" + data[channelid][0]['title'] + "</strong><br>" + data[channelid][0]['starttime'] + "<br>");


  $('.next').html("<strong>" + data[channelid][1]['title'] + "</strong><br>" + data[channelid][1]['starttime'] + "<br>");
});

}

function tvclear() {
  $('.now').html("No data");
  $('.next').html("No data");
}
</script>

<style type="text/css">
body {
    background: black;
    cursor: auto;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
}
:::-webkit-scrollbar { 
    display: none; 
}
#ViewRightControl {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#selectorHolder {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 200px;
    background: green;
    z-index: 100;
}
</style>

</head>
<body onload="changeChannel('http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8', 0);">
<object id="ViewRightControl" type="application/x-viewright-m3u8" wmode="transparent">
<param name="wmode" value="transparent">
</object>
<div id="selectorHolder">

</div>
</body></html>

I'm using this ViewRight plugin from Verimatrix (for Windows): http://warehouse.yousee.tv.s3.amazonaws.com/misc/plugin/YouSee.msi

Sure thing :) If you're using Chrome just Ctrl+U on the page or use this url view-source:http://clubace.dk/viewright_test.htm — Ace, Apr 03 '14 at 11:10
It was my initial attempt to place the div above the object-tag. — Ace, Apr 03 '14 at 11:26
Its fine I was just wondering thats all, this is quite a weird problem I must say :S — HaydnJW, Apr 03 '14 at 11:27
That's okay :) Yeah I've never encountered this behavior before when embedding flash players :S The wmode="transparent" usually takes care of business so I'm pretty stumped by this. — Ace, Apr 03 '14 at 11:32

score 2 · Accepted Answer · edited May 23 '17 at 12:14

2

I found a solution!!

It's a NPAPI plugin and here's a way to put something on top of that: HTML on top of NPAPI plugin

edited May 23 '17 at 12:14

Community

1
1

answered Jun 07 '14 at 11:51

Jan Sommer

3,698
1
21
35

1

By the way, I hope VeriMatrix are working on an alternative to their NPAPI plugin since it's deprecated and will be gone by the end of this year: http://blog.chromium.org/2014/05/update-on-npapi-deprecation.html – Jan Sommer Jun 07 '14 at 13:36
Well done @Jan Sommer :D This is a simple and clever workaround :thumbsup: Thanks – Ace Jun 09 '14 at 07:55

Div on top of ViewRight-player

1 Answers1

Linked