Overlaying publisher-video element on top of subscriber-video element not working

[primashah]

Hi ,
I am working on ionic 2 cordova app.

I am trying to set publisher's Video with absolute position in a way that it sits on top of subscriber video. I tried following css and code to make it work, but the publisher video is always positioned on top left corner of IPad screen:

css

.publisher-video{
      height: 120px;
      width: 250px;
      position: absolute;
     bottom: 0px;
      right: 0px;
      z-index: 9;
}

The publisher properties used for initialisation are:

{

  width: "250px",
  height: "120px",
  resolution: "1280x720",
  publishAudio: true,
  publishVideo: true

}

The subscriber properties are:
{

  width: "100%",
  height: "100%"

}

[msach22]

@primashah Are you using the updated plugin ? https://github.com/opentok/cordova-plugin-opentok

[alexisjcr07]

Hello, I have the same error, but in my case I am trying to show another view on the video.

my code:
.ts

none(){
this.cc = 'none';
this.style = 'none';
}
block(){
this.cc = 'block';
this.style = 'block';
}

    streamCreated: (event) => {

    let subscriberProperties = {width:"100%",height:"91% !important"};

    if(event.stream.videoType === 'screen') {
    this.session.subscribe(event.stream, 'screen-preview', subscriberProperties);
    this.none();
 }else 
   {
    this.session.subscribe(event.stream, 'subscriber', subOptions);
    this.block();
    OT.updateViews();
    
   }
  },

.html

.css
#subscriber {
width: 100% !important;
top: 0;
height: 91% !important;
overflow: hidden;
position: fixed;
margin: 0px;
background: #0c0c0c;
left: 0px;

}

.none {
width: 100% !important;
top: 0;
height: 91% !important;
overflow: hidden;
position: relative;
margin: 0px !important;
left: 0px;
display: none !important;

}

.block {
width: 100% !important;
top: 0;
height: 91% !important;
overflow: hidden;
position: relative;
margin: 0px !important;
left: 0px;
display: block !important;

}

#publisher {
width: 30% !important;
height: 18% !important;
overflow: hidden;
position: fixed;
margin: 0px !important;
right: 14px;
bottom: 80px;
left: auto;
z-index: 40;
}

#screen-preview {
width: 100% !important;
top: 0;
height: 91% !important;
overflow: hidden;
position: fixed;
margin: 0px !important;
background: transparent !important;
z-index: 999;
left: 0px;
}

[mmubasher]

I am using following design and it works perfectly for me using cordova-plugin-opentok

<div id="publisher"
     style="width: 30vh; height: 25vh; position: absolute; top: 0; left: 0; z-index: 1000; pointer-events:none;"></div>
<div id="subscriber"
     style="width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 500; pointer-events:none;"></div>