Html 移动Chrome（Android）上的视频标签缩放

我使用WebRTC流作为视频标签的源，我想在移动设备（Nexus 5X+Chrome）上播放视频标签

完全随机，手机上的视频流放大到实际视频的左上角25%。当缩放发生时，视频控制不会改变，几秒钟后，一切恢复正常

在桌面浏览器上不会出现这种情况，手机的Chrome控制台也不会输出任何错误。

HTML:

通过Facebook（移动网络）视频确认。快一个月了。三星S10，Chrome测试版。

通过Facebook（移动网络）视频确认。快一个月了。三星S10，Chrome测试版

<div class="video-player-container ratio-16by9">
    <video class="video" autoplay height="100%" width="100%" id="video-player">
        Your browser does not support HTML5 video.
    </video></div>

.video-player-container {
    position: relative;
    background-color: $color-primary;
    width: 100%;
    height: 100%;
    color: white;
}

.video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

.ratio-16by9 {
    @include aspect-ratio(16, 9);
}

@mixin aspect-ratio($width, $height) {
    position: relative;

    &:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: ($height / $width) * 100%;
    }

    .content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}