React Js, ios. У айфонов элемент c видео неправильно растягивается по ширине

Размещаю я видео в контейнере вот таким нехитрым способом:

const VideoComponent = React.memo(({ src, isPlaying, onLoadedMetadata, onTimeUpdate, onEnded }) => {
    const videoRef = useRef(null);
    const containerRef = useRef(null);
    const videoRatio = 2.026
    useEffect(() => {
        if (videoRef.current) {
            if (isPlaying) {
                videoRef.current.play();
            } else {
                videoRef.current.pause();
            }
        }
        
    }, [isPlaying, src]);

    return (
        <div className="video-container" ref={containerRef}>
            <video 
                ref={videoRef} 
                loop 
                muted 
                playsInline 
                webkit-playsinline="true"
                x5-playsinline="true"
                className="onboarding-image" 
                onTimeUpdate={onTimeUpdate} 
                onEnded={onEnded} 
                onLoadedMetadata={(e) => {
                    onLoadedMetadata(e.target);
                    if (containerRef.current) {
                        containerRef.current.style.width = `${containerRef.current.offsetHeight / videoRatio}px`; //этого if раньше вообще не было, я попробовала задать ширину явно, меньше высоты в videoRatio раз, но все равно на айфонах получается растянуто
                    }
                }}
            >
                <source src={src} type="video/webm" />
                Ваш браузер не поддерживает видео.
            </video>
        </div>
    );
});

Мои стили .css

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 50px);
    width: auto;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.onboarding-image {
    width: auto;
    height: 100%;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    position: relative;
}

@supports (-webkit-touch-callout: none) {
    .video-container {
        height: calc(100% - 50px);
        width: auto;
        margin: 0 auto;
    }
    
    .onboarding-image {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
}

Стили родительского контейнера:

{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

Все отображается, как надо, в браузерах на десктопе (у меня linux, если это важно). В devTools, в режиме адаптивного устройства меняю ширину-высоту экрана, все получается хорошо, на android все тоже хорошо, однако у айфонов ширина почему-то растягивается на весь родительский контейнер (даже при том, что я пыталась явно ее задать, возможно, вычисляется на айфонах неправильно), видео получается растянутым по ширине. Бесчисленные советы от AI не помогли, пробовала посмотреть через сайт http://www.responsinator.com, как на айфоне смотрится, там все отлично. Но на настоящих айфонах все совсем не отлично. Видео непропорционально широкое. Тимлид пользуется айфоном. Отчаянно прошу помочь.