<template>
  <div class="video-box">
    <div class="top-left">
      <h3>B站官网</h3>
      <iframe
        src="https://element-plus.midfar.com/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88"
        frameborder="0"
        class="iframe-box"
      ></iframe>
    </div>
    <div class="top-right">
      <h3>播放视频</h3>
      <video
        controls
        autoplay="autoplay"
        loop="loop"
        class="video-box"
        type="video/mp4"
      >
        <source src="../../assets/mp4/1.mp4" />
      </video>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
</script>
<style scoped lang="scss">
.video-box {
  width: 100%;
  height: 100%;
  position: relative;
  .top-left,
  .top-right {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    height: 50%;
    .iframe-box,
    .video-box {
      width: 90%;
      height: 80%;
    }
  }
  .top-left {
    left: 0;
  }
  .top-right {
    right: 0;
  }
}
</style>
