Style Consistency Changes and Element Improvements (#541)

Co-authored-by: braginini <bangvalo@gmail.com>

src/pages/get-started/index.mdx

@@ -7,9 +7,7 @@ export const title = 'Getting Started'
 Welcome to NetBird! This guide will walk you through our new onboarding process to create your account, connect your first devices,
 and build a secure peer-to-peer overlay network in less than ten minutes.
 
-<div className="videowrapper">
-    <iframe src="https://www.youtube.com/embed/dr0u-u9uD84" allow="fullscreen;"></iframe>
-</div>
+<YouTube videoId="dr0u-u9uD84" />
 
 ## Create Your Account
 

src/pages/get-started/install/opnsense.mdx

@@ -4,9 +4,7 @@ The NetBird client (agent) allows a peer to join a pre-existing NetBird deployme
 there are both managed and [self-hosted](https://docs.netbird.io/selfhosted/selfhosted-quickstart) options available.
 
 
-<div className="videowrapper">
-    <iframe src="https://www.youtube.com/embed/AK0Ct-ULFKg?start=669" allow="fullscreen;"></iframe>
-</div>
+<YouTube videoId="AK0Ct-ULFKg" start={669} />
 
 <Note>
     The NetBird package is officially included starting from OPNsense `25.7.3`.

src/pages/get-started/install/pfsense.mdx

@@ -7,9 +7,7 @@ there are both managed and [self-hosted](https://docs.netbird.io/selfhosted/self
 This installation is intended for early adopters while the pfSense package is under review and not yet available in the pfSense package manager.
 </Note>
 
-<div className="videowrapper">
-    <iframe src="https://www.youtube.com/embed/Kgrcquyeohc" allow="fullscreen;"></iframe>
-</div>
+<YouTube videoId="Kgrcquyeohc" />
 
 ## Prerequisites
 - Shell/SSH access to pfSense (via Web UI shell or remote SSH)

src/pages/get-started/install/proxmox-ve.mdx

@@ -110,9 +110,7 @@ Now you should see a successful connection message and you're good to go! Now if
 
 ## Proxmox Setup Tutorial
 
-<div className="videowrapper">
-<iframe src="https://www.youtube.com/embed/KMNS_JoHFhg" allow="fullscreen;"></iframe>
-</div>
+<YouTube videoId="KMNS_JoHFhg" />
 
 ## Additional Resources
 

src/pages/get-started/install/raspberrypi.mdx

@@ -2,9 +2,7 @@ import {Note} from "@/components/mdx";
 
 # Install NetBird on the Raspberry Pi
 
-<div className="videowrapper">
-<iframe src="https://www.youtube.com/embed/P0aAdYnex80" allow="fullscreen;"></iframe>
-</div>
+<YouTube videoId="P0aAdYnex80" />
 
 Start by downloading [Raspberry Pi Imager](https://www.raspberrypi.com/software/) for your operating system and inserting a microSD card with at least 8GB of capacity, though 32GB is recommended for breathing room.
 

src/pages/get-started/install/synology.mdx

@@ -120,9 +120,7 @@ For a complete cleanup, you should also remove the Synology NAS as a peer from y
 
 ## Video Walkthrough
 
-<div className="videowrapper">
-    <iframe src="https://www.youtube.com/embed/9VKOAe_T038" allow="fullscreen;"></iframe>
-</div>
+<YouTube videoId="9VKOAe_T038" />
 
 ## Support Us