video 组件为什么设置高度不能动态设置呢

<template>
<view class="container">
<video
id="myVideo"
src="https://dow.dowlz13.com/20230928/26488_c6b6d450/长安三万里.mp4"
controls
autoplay
muted
loop
@play="handlePlay"
@pause="handlePause"
@timeupdate="handleTimeUpdate"
@ended="handleEnded"

</video>
</view>
</template>

<script>
export default {
methods: {
handlePlay() {
console.log('视频开始播放');
},
handlePause() {
console.log('视频暂停');
},
handleTimeUpdate(e) {
console.log('视频播放进度更新', e.detail.currentTime);
},
handleEnded() {
console.log('视频播放结束');
}
}
};
</script>

<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
video {
width: 100%;
//height: auto; //这里注释了就可以用，这里不注释就可以用，怎么才能让他自动高度呢
}
</style>