[SOLVED] Azure Media Player Video Shifted from Left on Android Devices Only

Azure Media Player Video Shifted from Left on Android Devices Only

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>

Solution

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;
}