<template>
  <uv-popup 
    ref="popup"
    :overlayOpacity="0.8"
    :customStyle="{
      backgroundColor: 'transparent',
    }"
  >
    <view>
      <video class="video"
        id="video"
        :src="videoUrl" 
        autoplay
        play-btn-position="center"
        controls
        :show-fullscreen-btn="false"
        :show-center-play-btn="true"
      ></video>
    </view>
  </uv-popup>
</template>

<script>
	export default {
		data() {
			return {
        videoUrl: '',
      }
    },
    methods: {
      open(uvideoUrlrl) {
        this.videoUrl = videoUrl
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
        this.videoUrl = ''
      },
    },
  }
</script>

<style scoped lang="scss">
.video {
  width: 100vw;
  height: calc(100vh - #{$navbar-height} - var(--status-bar-height) - 20rpx);
}
</style>