Azure Media Player Video Shifted from Left on Android Devices Only

Question

I placed 4 players on one page which are working good on desktop and iOS however on android devices there is a left shift can be seen in following image as black area.

It only appears when the screen width is less than 430px.

Following is the code I am using.

 var myAmpOptions = { "nativeControlsForTouch": false, "logo": { "enabled": false }, autoplay: false, controls: false, fluid: false, "plugins": {}, poster: "https://anawaz.tk/intvprime/assets/imgs/stream-now-loading.jpg" }; var tile1_player = amp("tile1-azuremediaplayer", myAmpOptions); tile1_player.src([{ src: "https://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },]);

 <script src="https://amp.azure.net/libs/amp/2.3.10/azuremediaplayer.min.js" crossorigin="anonymous"></script> <video id="tile1-azuremediaplayer" class="azuremediaplayer amp-default-skin" width="100%" height="100%" tabindex="0"> <p class="amp-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video </p> </video>

Answer 1

Issue was due to amp-default-skin css class. Which use min-width: 190px; I overwrite with following css.

.amp-default-skin{
  min-width: 160px !important;
}