diff --git a/package.json b/package.json
index 9198a6b..ac228ba 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
-    "preview": "vite preview --port 3069",
+    "preview": "vite preview --port 3069 --host",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
diff --git a/src/constants/index.js b/src/constants/index.js
index bb06a2b..6ae2f0f 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -444,6 +444,12 @@ export const gameData = [
     shortName: "DDR",
     icon: null,
     cardBG: null,
+    videoTable: [
+      VersionConstants.DDR_ACE,
+      VersionConstants.DDR_A20,
+      VersionConstants.DDR_A20_PLUS,
+      VersionConstants.DDR_A3,
+    ],
     scoreHeaders: [
       { text: "Combos", value: "data.combo" },
       { text: "Halo", value: "data.halo" },
@@ -624,6 +630,7 @@ export const gameData = [
     name: "DDR OmniMIX",
     icon: "/assets/icon/ddr.webp",
     cardBG: "/assets/card/ddr.webp",
+    videoTable: [VersionConstants.DDR_A20_PLUS],
     scoreHeaders: [
       { text: "Combos", value: "data.combo" },
       { text: "Halo", value: "data.halo" },
@@ -904,6 +911,17 @@ export const gameData = [
     name: "GITADORA (Drums)",
     icon: null,
     cardBG: null,
+    videoTable: [
+      VersionConstants.GITADORA,
+      VersionConstants.GITADORA_OVERDRIVE,
+      VersionConstants.GITADORA_TRIBOOST,
+      VersionConstants.GITADORA_TRIBOOST_RE_EVOLVE,
+      VersionConstants.GITADORA_MATIXX,
+      VersionConstants.GITADORA_EXCHAIN,
+      VersionConstants.GITADORA_NEXTAGE,
+      VersionConstants.GITADORA_HIGH_VOLTAGE,
+      VersionConstants.GITADORA_FUZZUP,
+    ],
     noRivals: true,
     playerHeaders: [
       {
@@ -942,6 +960,17 @@ export const gameData = [
     name: "GITADORA (Guitar)",
     icon: null,
     cardBG: null,
+    videoTable: [
+      VersionConstants.GITADORA,
+      VersionConstants.GITADORA_OVERDRIVE,
+      VersionConstants.GITADORA_TRIBOOST,
+      VersionConstants.GITADORA_TRIBOOST_RE_EVOLVE,
+      VersionConstants.GITADORA_MATIXX,
+      VersionConstants.GITADORA_EXCHAIN,
+      VersionConstants.GITADORA_NEXTAGE,
+      VersionConstants.GITADORA_HIGH_VOLTAGE,
+      VersionConstants.GITADORA_FUZZUP,
+    ],
     noRivals: true,
     playerHeaders: [
       {
@@ -1109,6 +1138,14 @@ export const gameData = [
     shortName: "IIDX",
     icon: "/assets/icon/iidx.webp",
     cardBG: "/assets/card/iidx.webp",
+    videoTable: [
+      VersionConstants.IIDX_CANNON_BALLERS,
+      VersionConstants.IIDX_ROOTAGE,
+      VersionConstants.IIDX_HEROIC_VERSE,
+      VersionConstants.IIDX_BISTROVER,
+      VersionConstants.IIDX_CASTHOUR,
+      VersionConstants.IIDX_RESIDENT,
+    ],
     scoreHeaders: [
       { text: "Misses", value: "data.misses" },
       { text: "Clear Status", value: "data.medal" },
diff --git a/src/css/main.css b/src/css/main.css
index 5a97b3d..d1e3f4e 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -17,6 +17,29 @@
   transform: scale(0.9);
 }
 
+.card-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.background-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1; /* Ensure the video is behind other content */
+  border-radius: 16px; /* Match the rounded corners of the card */
+}
+
+.card-content {
+  position: relative;
+  z-index: 1; /* Ensure content inside the card is above the video */
+  padding: 20px; /* Add padding if needed */
+  border-radius: 16px; /* Match the rounded corners of the card */
+}
+
 img {
   pointer-events: none;
 }
\ No newline at end of file
diff --git a/src/views/Game/EditView.vue b/src/views/Game/EditView.vue
index b039f82..978d373 100644
--- a/src/views/Game/EditView.vue
+++ b/src/views/Game/EditView.vue
@@ -66,21 +66,34 @@ var settings = [
 ];
 
 function getSources() {
-  var sources = null;
   if (!versionForm.currentVersion) {
-    sources = thisGame.cardBG;
+    return thisGame.cardBG;
   } else {
-    sources = `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
+    return `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
+  }
+}
+
+function getVideoSource() {
+  if (
+    versionForm.currentVersion &&
+    thisGame.videoTable?.includes(versionForm.currentVersion)
+  ) {
+    return `https://web3.phaseii.network/gameassets/video/${thisGame.id}/${versionForm.currentVersion}.mp4`;
+  } else {
+    return null;
   }
-  return sources;
 }
 
 function getCardStyle() {
-  return `
+  if (thisGame.videoTable?.includes(versionForm.currentVersion)) {
+    return null;
+  } else {
+    return `
       background-image: url('${getSources()}');
       background-size: cover;
       background-repeat: no-repeat;
     `;
+  }
 }
 
 function filterVersions(haveVersions) {
@@ -142,11 +155,21 @@ async function loadProfile() {
         main
       />
       <div
-        v-if="versionForm.currentVersion"
+        v-if="versionForm.currentVersion && myProfile"
         :style="getCardStyle()"
-        class="rounded-2xl mb-6"
+        class="rounded-2xl mb-6 card-container"
       >
-        <div class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3">
+        <video
+          autoplay
+          muted
+          loop
+          playsinline
+          :src="getVideoSource()"
+          class="background-video"
+        ></video>
+        <div
+          class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3 card-content"
+        >
           <div class="w-full">
             <ProfileCard
               v-if="myProfile"
diff --git a/src/views/Game/GameView.vue b/src/views/Game/GameView.vue
index ff08383..117f790 100644
--- a/src/views/Game/GameView.vue
+++ b/src/views/Game/GameView.vue
@@ -86,21 +86,34 @@ async function loadProfile() {
 }
 
 function getSources() {
-  var sources = null;
   if (!versionForm.currentVersion) {
-    sources = thisGame.cardBG;
+    return thisGame.cardBG;
   } else {
-    sources = `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
+    return `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
+  }
+}
+
+function getVideoSource() {
+  if (
+    versionForm.currentVersion &&
+    thisGame.videoTable?.includes(versionForm.currentVersion)
+  ) {
+    return `https://web3.phaseii.network/gameassets/video/${thisGame.id}/${versionForm.currentVersion}.mp4`;
+  } else {
+    return null;
   }
-  return sources;
 }
 
 function getCardStyle() {
-  return `
+  if (thisGame.videoTable?.includes(versionForm.currentVersion)) {
+    return null;
+  } else {
+    return `
       background-image: url('${getSources()}');
       background-size: cover;
       background-repeat: no-repeat;
     `;
+  }
 }
 
 const headers = [];
@@ -180,8 +193,22 @@ const navigateToProfile = (item) => {
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <div :style="getCardStyle()" class="rounded-2xl mb-6">
-        <div class="bg-white dark:bg-slate-900/90 rounded-2xl p-3">
+      <div
+        v-if="versionForm.currentVersion && myProfile"
+        :style="getCardStyle()"
+        class="rounded-2xl mb-6 card-container"
+      >
+        <video
+          autoplay
+          muted
+          loop
+          playsinline
+          :src="getVideoSource()"
+          class="background-video"
+        ></video>
+        <div
+          class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3 card-content"
+        >
           <div class="w-full">
             <div
               class="md:flex md:px-5 md:space-x-10 md:justify-between md:items-center"
diff --git a/src/views/Game/PlayerView.vue b/src/views/Game/PlayerView.vue
index 0989bb0..6e75d2f 100644
--- a/src/views/Game/PlayerView.vue
+++ b/src/views/Game/PlayerView.vue
@@ -141,21 +141,34 @@ var loadStats = [
 ];
 
 function getSources() {
-  var sources = null;
   if (!versionForm.currentVersion) {
-    sources = thisGame.cardBG;
+    return thisGame.cardBG;
   } else {
-    sources = `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
+    return `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
+  }
+}
+
+function getVideoSource() {
+  if (
+    versionForm.currentVersion &&
+    thisGame.videoTable?.includes(versionForm.currentVersion)
+  ) {
+    return `https://web3.phaseii.network/gameassets/video/${thisGame.id}/${versionForm.currentVersion}.mp4`;
+  } else {
+    return null;
   }
-  return sources;
 }
 
 function getCardStyle() {
-  return `
+  if (thisGame.videoTable?.includes(versionForm.currentVersion)) {
+    return null;
+  } else {
+    return `
       background-image: url('${getSources()}');
       background-size: cover;
       background-repeat: no-repeat;
     `;
+  }
 }
 
 function colorText(stat, profile) {
@@ -283,9 +296,19 @@ function formatCounts(profile) {
         <div
           v-if="versionForm.currentVersion && myProfile"
           :style="getCardStyle()"
-          class="rounded-2xl mb-6"
+          class="rounded-2xl mb-6 card-container"
         >
-          <div class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3">
+          <video
+            autoplay
+            muted
+            loop
+            playsinline
+            :src="getVideoSource()"
+            class="background-video"
+          ></video>
+          <div
+            class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3 card-content"
+          >
             <div class="w-full">
               <ProfileCard
                 use-small