From af83dfa7d8b44f2c37d905f0365d3ab52aff1e9f Mon Sep 17 00:00:00 2001
From: Firq <firelp42@gmail.com>
Date: Fri, 29 Dec 2023 20:20:08 +0100
Subject: [PATCH] Improved custom youtube embed component

---
 src/components/youtubeEmbed.astro | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/youtubeEmbed.astro b/src/components/youtubeEmbed.astro
index 16882c6..e0a99fa 100644
--- a/src/components/youtubeEmbed.astro
+++ b/src/components/youtubeEmbed.astro
@@ -1,7 +1,5 @@
 ---
 import { YouTube } from '@astro-community/astro-embed-youtube'
-import type { ImageMetadata } from 'astro'
-
 export interface Props {
   id: string
   thumbnail: string
@@ -11,9 +9,7 @@ const { id, thumbnail } = Astro.props
 ---
 
 <div class="youtube-center">
-  <noscript
-    style="display: flex; justify-content: center;"
-  >
+  <noscript style="display: flex; justify-content: center;">
     <style>
       lite-youtube {
         display: none;
@@ -21,7 +17,7 @@ const { id, thumbnail } = Astro.props
     </style>
     <div class="warningtext">
       <span>
-        To view the video, enable JavaScript or <a
+        To view the video, enable JavaScript or<br /><a
           href=`https://www.youtube.com/watch?v=${id}`
           target="_blank"
           rel="noopener noreferrer">watch it on YouTube</a
@@ -29,7 +25,7 @@ const { id, thumbnail } = Astro.props
       </span>
     </div>
   </noscript>
-  <YouTube id={id} poster={thumbnail}/>
+  <YouTube id={id} poster={thumbnail} />
 </div>
 
 <style>
@@ -54,6 +50,12 @@ const { id, thumbnail } = Astro.props
   }
 
   span {
-    margin-top: 10%
+    text-align: center;
+    margin-top: 20%;
+  }
+
+  span > a {
+    font-style: unset;
+    font-weight: bold;
   }
 </style>