VideoJS on pause overlay not working normal on moible device

Question

I am trying to add an overlay on when videojs player on pause so I can place some ads on the video. However the overlay on mobile device cover almost the whole player and I can not find the control bar anymore. Can anyone help solve this problem?

Here is my code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/video-js.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/video.min.js"></script>
<style>
.parent{
position:relative;
}
.child{
position:absolute;
width:450px;
height:300px;
left:50%;
top:50%;
margin-left:-225px;
margin-top:-99px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div id="div112" class="parent">
<video id="video123" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{"fluid": true, "playbackRates": [0.5, 1, 1.25, 1.5, 2],"nativeControlsForTouch": true}' controls>
<source src="videourl" type='video/mp4'>
</video>
</div>
<script>
videojs("video123").ready(function(){
var div1 = document.createElement('div');
div1.innerHTML = '<iframe src=\"https://woseller.com/woseller-juicyads-page/" width=\"310\" height=\"275\" scrolling=no frameborder=0></iframe>';
div1.className="child";
this.on("pause", function(){
document.getElementById("div112").appendChild(div1);
});
this.on("play", function(){
document.getElementById("div112").removeChild(div1);
});

});
</script>

The code above works fine on pc device, but it can not work normal on mobile device. The overlay cover almost the full player and I can not find the control bar. See the image below: Player works fine on Pc device

Player not works well on mobile device

Answer 1

Despite the physical pixels resolution, the logical pixel width on most mobile devices is surprisingly low. https://viewportsizer.com/devices/. So defining a 450x300px overlay is simply larger than the player if the player is the device width.