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>