OT.updateViews() not working

[cardo961]

Hi all,
I've been trying to use OT.updateViews() so that the publisher (smaller in size) will be on top of the bigger subscriber. I know that the video/camera is the native Android/iOS and z-indexing does not work but i saw in another issue that OT.updateViews() is the solution, however it is not working for me at all as the subscriber video still continues to be in front of the publisher. Please see mu code below. Thanks in advance.

JS
function StartChat() {

// Initialize Session Objects
session = OT.initSession(apiKey, sessionId);  

var publisher = "";
var subscriber = "";

session.on({ streamCreated: function(event) {
    subscriber = session.subscribe(event.stream, 'subscriber');
  },
  streamDestroyed: function(event) {
    console.log(`Stream ${event.stream.name} ended because ${event.reason}.`);
  },
  sessionConnected: function(event) {
    publisher = OT.initPublisher("publisher");
    session.publish(publisher);
    OT.updateViews();
  }
});

session.connect(token, function(error) {
  if (error) {
    console.log(`There was an error connecting to the session: ${error}`);
  }
}); 

document.getElementById("flipbutton").addEventListener("click", function(){
    publisher.setCameraPosition("front"); //or "back"
});

window.plugins.insomnia.keepAwake();

}

CSS/ HTML
#videos {
position: relative;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}

    #subscriber {
        position: absolute;
        left: 0;
        bottom: 0;
        top: 42px;
        width: 100%;
        z-index: 0;
    }
    
    #publisher {
        position: absolute;
        width: 80px;
        height: 100px;
        bottom: 10px;
        left: 10px;
        z-index: 100;
    }