<template>
    <div>
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <video-background
                src="video/bg-video.mp4"
                style="max-height: 400px; height: 100vh;"
            >
              <h1 style="color: white;">Hello welcome!</h1>
            </video-background>
<!--            <video  muted id="myVideo" autoplay loop>-->
<!--              <source src="~/assets/video/bg-video.mp4" type="video/mp4">-->
<!--              <source src="~/assets/video/bg-video.ogg" type="video/ogg">-->
<!--              Your browser does not support HTML5 video.-->
<!--            </video>-->

          </div>
        </div>
      </div>
      <home-bar />
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 ">
            <div class="d-flex justify-content-center adaptive mb-4">
              <span class="text-muted fw-bold fs-6 ">Adaptive soundscape : <span class="" style="color: #e9c046">On</span> </span><span class="ps-3"><i class="fa-solid text-muted d-flex pt-1 mt-1 fa-chevron-right"></i></span>
            </div>
            </div>
        </div>
      </div>
    </div>
</template>
<script>

import HomeBar from "../components/homebar";
export default {
  components: {HomeBar},
  methods:{
    handleAnimation: function (anim) {
      this.anim = anim;
    }
  }

}
</script>

<style>
#myVideo{
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;

  padding: 0;
  margin: 0;
  z-index: -99;
}
.adaptive{
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
}

</style>