problem with transparent video overlay

Hi All 

I hit quite a big problem trying to overlay a transparent PNG onto video node. It looks like transparency is not applied correctly and the white transparent image makes video darker. 

Screen grab - video is a white 30 seconds clip. Top rectangles are black with different transparency level the bottom ones are white and from some reason are visible as grey. 
https://drive.google.com/open?id=0B7BZMWDc5aPQcGxlQVhfbE1sWDg

Can anyone advice, what is going on here? Is the "Poster" object can be used as an overlay? 

<component name = "VideoExample" extends = "Scene"   >
  <script type = "text/brightscript" >
    <![CDATA[
      sub init()
        videocontent = createObject("RoSGNode", "ContentNode")
        videocontent.title = "Example Video"
        videocontent.streamformat = "mp4"
        videocontent.url = "pkg:/images/white.mp4"
        video = m.top.findNode("videoNode")
        video.content = videocontent
        video.setFocus(true)
        video.control = "play"
      end sub
    ]]>
  </script>
  <children >
    <Video id="videoNode" width="1280" height="720" loop="true">
      <Poster id="overlayNode" uri="pkg:/images/gradient.png"/>
    </Video>
  </children>
</component>

In previous version of Brightscript we were using: "roImageCanvas" which is deprecated and looks like "Poster" is the only replacement. Isn't it?
BTW transparency is incorrect only when overlay-ed on the video node - the same PNG overlay-ed on white "Poster" background behaves as expected and bottom row of rectangles is not visible.  

   <Poster id="overlayNode" uri="pkg:/images/white.png">
      <Poster id="overlayNode" uri="pkg:/images/gradient.png"/>
    </Poster>

Thank you in advance for any suggestions.