Fix behind the scenes banner video.

wildgracevideo · Jun 17, 2024 · 00a5041 · 00a5041
1 parent d0457ad
commit 00a5041
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/components/AutoPlayVideo.vue b/components/AutoPlayVideo.vue
@@ -19,7 +19,7 @@
     </video>
     <button
         v-if="withSoundControl"
-        class="relative bottom-12 z-10 float-right ml-auto mr-4 h-8 w-8 cursor-pointer text-white md:h-10 md:w-10"
+        :class="`relative ${soundControlBottomClass} z-10 float-right ml-auto mr-4 h-8 w-8 cursor-pointer text-white md:h-10 md:w-10`"
         @click="toggleMute"
     >
         <span class="sr-only">{{
@@ -66,12 +66,18 @@
         observer.observe(videoElement.value!);
     });
 
-    const props = defineProps<{
-        title: string;
-        description: string;
-        thumbnailImage: string | undefined;
-        video: string;
-        publicationDate: string;
-        withSoundControl?: boolean;
-    }>();
+    const props = withDefaults(
+        defineProps<{
+            title: string;
+            description: string;
+            thumbnailImage: string | undefined;
+            video: string;
+            publicationDate: string;
+            withSoundControl?: boolean;
+            soundControlBottomClass: string;
+        }>(),
+        {
+            soundControlBottomClass: 'bottom-12',
+        }
+    );
 </script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -176,13 +176,7 @@ const config = {
         },
     },
     robots: {
-        disallow: [
-            '/admin',
-            '/admin/*',
-            '/api',
-            '/api/*',
-            '/links',
-        ],
+        disallow: ['/admin', '/admin/*', '/api', '/api/*', '/links'],
     },
     auth: {
         baseURL: SITE_URL,

diff --git a/pages/behind-the-scenes.vue b/pages/behind-the-scenes.vue
@@ -2,9 +2,11 @@
     <OgMeta :title="seoTitle" :description="seoDescription" />
     <SchemaOrgWebPage type="AboutPage" :name="seoTitle" />
     <section
-        class="relative flex h-[calc(100dvh-116.45px)] flex-col justify-between overflow-x-hidden"
+        class="relative flex h-[calc(100dvh-116.45px)] flex-col justify-between"
     >
-        <div class="fixed mx-auto h-[45%] w-full md:h-[55%]">
+        <div
+            class="backface-visibility-hidden fixed mx-auto h-[50%] w-full md:h-[65%]"
+        >
             <AutoPlayVideo
                 :title="bannerVideo.seoTitle"
                 :description="bannerVideo.seoDescription"
@@ -13,6 +15,7 @@
                 :video="bannerVideo.video"
                 :with-sound-control="true"
                 class="h-full w-full object-cover object-center"
+                sound-control-bottom-class="bottom-14 md:bottom-16"
             />
         </div>
         <div
@@ -332,4 +335,8 @@
     .slider {
         animation: 60s slide infinite linear;
     }
+
+    .backface-visibility-hidden {
+        backface-visibility: hidden;
+    }
 </style>