ok

pages/getstarted.vue

@@ -1,5 +1,10 @@
 <template>
   <div>
+    <audio ref="audio" src="/sounds/Lagoon.aac" loop></audio>
+    <video-background
+        src="video/bg-video.mp4"
+        style=" height: 100vh;"
+    >
     <top-logo-bar></top-logo-bar>
     <div class="container-fluid">
       <div class="row justify-content-center">
@@ -29,14 +34,28 @@
         </div>
       </div>
     </div>
+    </video-background>
   </div>
 </template>
 <script>
 // can be used both composition api and roller api
 import TopLogoBar from "../components/toplogobar";
+import HomeBar from "../components/homebar";
       export default {
+        components: {HomeBar},
+        methods:{
+          handleAnimation: function (anim) {
+            this.anim = anim;
+          },
+          playPause(play){
+            console.log("Play Pause");
+            if (play){
+              this.$refs['audio'].play();
+            }else {
+              this.$refs['audio'].pause();
 
-  components: {TopLogoBar}
-
+            }
+          }
+        }
 }
 </script>

pages/letsgo.vue

@@ -1,6 +1,13 @@
 <template>
   <div>
+    <audio ref="audio" src="/sounds/Lagoon.aac" loop></audio>
+    <video-background
+        src="video/bg-video.mp4"
+        style=" height: 100vh;"
+    >
+      <top-logo-bar></top-logo-bar>
     <div class="container-fluid pt-3 ps-4">
+
       <div class="row">
         <div class="col-3">
           <a class="navbar-brand" href="#">
@@ -135,5 +142,6 @@
         </div>
       </div>
     </div>
+    </video-background>
   </div>
 </template>