add optional youtube intro link

.env.example

@@ -6,6 +6,7 @@ ADMIN_USER=admin
 ADMIN_PASSWORD=admin
 ADMIN_COOKIE=muelleel
 
+YOUTUBE_INTRO_LINK=https://www.youtube-nocookie.com/embed/e78_QbTNb4s
 TEAMSPEAK_LINK=http://example.com
 DISCORD_LINK=http://example.com
 PAYPAL_LINK=http://example.com

astro.config.mjs

@@ -42,6 +42,8 @@ export default defineConfig({
 
       WEBHOOK_ENDPOINT: envField.string({ context: 'server', access: 'secret', optional: true }),
 
+      YOUTUBE_INTRO_LINK: envField.string({ context: 'server', access: 'secret', optional: true }),
+
       TEAMSPEAK_LINK: envField.string({ context: 'server', access: 'secret', default: 'http://example.com' }),
       DISCORD_LINK: envField.string({ context: 'server', access: 'secret', default: 'http://example.com' }),
       PAYPAL_LINK: envField.string({ context: 'server', access: 'secret', default: 'http://example.com' }),

src/pages/index.astro

@@ -5,7 +5,7 @@ import Teams from '@app/website/index/Teams.svelte';
 import Countdown from '@app/website/index/Countdown.svelte';
 import Varo from '@assets/img/varo.webp';
 import Background from '@assets/img/background.webp';
-import { START_DATE } from 'astro:env/server';
+import { START_DATE, YOUTUBE_INTRO_LINK } from 'astro:env/server';
 import { getSetting, SettingKey } from '@util/settings';
 import { db } from '@db/database.ts';
 
@@ -78,6 +78,23 @@ const information = [
     </div>
   </div>
 
+  {
+    YOUTUBE_INTRO_LINK && (
+      <div class="bg-base-300 w-full py-12 flex justify-center">
+        <iframe
+          width="624"
+          height="351"
+          src={YOUTUBE_INTRO_LINK}
+          title="YouTube video player"
+          frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          referrerpolicy="strict-origin-when-cross-origin"
+          allowfullscreen
+        />
+      </div>
+    )
+  }
+
   <div class="fixed bottom-0 sm:right-0 m-5 hidden sm:block">
     <Scroll href="#teams" client:load />
   </div>