如何设置HTML5视频元素比例？

Question

有没有办法设置视频元素比例？我tried this method，但它对元素不起作用。

我正在使用WebRTC来记录来自摄像头的视频，因此开头没有src属性。我想设置比率的原因是为了避免从blob加载后的高度跳跃。

我希望有一个CSS解决方案，或使用div容器的解决方案。

<video data-index={this.props.index} 
controls 
ref={(video)=> {this.videoElem = video}}>
video goes here
</video>

audio, video {

    border: 2px dotted grey; // dottd does not work for video element
    width: 100%;
    height: auto;
    object-fit: cover; // does not work
    background-color: grey;
}