如何在Nuxtjs中将视频容器平滑地扩展到视区

<template>
  <div>
    <video ref="videoElement" controls>
      <source :src="videoUrl" type="video/mp4">
    </video>
  </div>
</template>

export default {
  data() {
    return {
      videoUrl: 'https://example.com/video.mp4'
    };
  }
}

export default {
  mounted() {
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      const videoElement = this.$refs.videoElement;
      const { clientWidth, clientHeight } = document.documentElement;
      videoElement.style.width = `${clientWidth}px`;
      videoElement.style.height = `${clientHeight}px`;
    }
  }
}

<template>
  <div>
    <h1>视频展示页面</h1>
    <VideoContainer />
  </div>
</template>

<script>
import VideoContainer from '~/components/VideoContainer.vue';

export default {
  components: {
    VideoContainer
  }
}
</script>