diff --git a/src/components/common/YoutubeVideo.astro b/src/components/common/YoutubeVideo.astro
index 689e350..dfa882d 100644
--- a/src/components/common/YoutubeVideo.astro
+++ b/src/components/common/YoutubeVideo.astro
@@ -158,17 +158,23 @@ const {
       //   We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003
       this.addEventListener('click', this.addIframe);
 
+      // Detect Safari
+      const isSafari = navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome');
+
+      // Detect mobile browser
+      const isMobile = navigator.userAgent.includes('Mobi') || navigator.userAgent.includes('Android');
+
       // Chrome & Edge desktop have no problem with the basic YouTube Embed with ?autoplay=1
       // However Safari desktop and most/all mobile browsers do not successfully track the user gesture of clicking through the creation/loading of the iframe,
       // so they don't autoplay automatically. Instead we must load an additional 2 sequential JS files (1KB + 165KB) (un-br) for the YT Player API
       // TODO: Try loading the the YT API in parallel with our iframe and then attaching/playing it. #82
-      this.needsYTApiForAutoplay = navigator.vendor.includes('Apple') || navigator.userAgent.includes('Mobi');
+      this.needsYTApiForAutoplay = isSafari || isMobile;
     }
 
     /**
      * Add a <link rel={preload | preconnect} ...> to the head
      */
-    static addPrefetch(kind, url, as) {
+    static addPrefetch(kind: string, url: string, as: string | undefined) {
       const linkEl = document.createElement('link');
       linkEl.rel = kind;
       linkEl.href = url;
@@ -217,7 +223,7 @@ const {
       });
     }
 
-    async addYTPlayerIframe(params) {
+    async addYTPlayerIframe(params: any[] | URLSearchParams) {
       this.fetchYTPlayerApi();
       await this.ytApiPromise;
 
@@ -231,7 +237,7 @@ const {
         videoId: this.videoId,
         playerVars: paramsObj,
         events: {
-          onReady: (event) => {
+          onReady: (event: { target: { playVideo: () => void; }; }) => {
             event.target.playVideo();
           },
         },
diff --git a/src/components/widgets/BlogHighlightedPosts.astro b/src/components/widgets/BlogHighlightedPosts.astro
index 38a00d7..53e5453 100644
--- a/src/components/widgets/BlogHighlightedPosts.astro
+++ b/src/components/widgets/BlogHighlightedPosts.astro
@@ -34,7 +34,7 @@ const posts = APP_BLOG.isEnabled ? await findPostsByIds(postIds) : [];
 
 {
   APP_BLOG.isEnabled ? (
-    <WidgetWrapper id={id} isDark={isDark} containerClass={classes?.container} bg={bg}>
+    <WidgetWrapper id={id} isDark={isDark} containerClass={classes?.container as string} bg={bg}>
       <div class="flex flex-col lg:justify-between lg:flex-row mb-8">
         {title && (
           <div class="md:max-w-sm">
diff --git a/src/components/widgets/BlogLatestPosts.astro b/src/components/widgets/BlogLatestPosts.astro
index 9b45383..3173434 100644
--- a/src/components/widgets/BlogLatestPosts.astro
+++ b/src/components/widgets/BlogLatestPosts.astro
@@ -35,7 +35,7 @@ const posts = APP_BLOG.isEnabled ? await findLatestPosts({ count }) : [];
 
 {
   APP_BLOG.isEnabled ? (
-    <WidgetWrapper id={id} isDark={isDark} containerClass={classes?.container} bg={bg}>
+    <WidgetWrapper id={id} isDark={isDark} containerClass={classes?.container as string} bg={bg}>
       <div class="flex flex-col lg:justify-between lg:flex-row mb-8">
         {title && (
           <div class="md:max-w-sm">
diff --git a/src/components/widgets/Features.astro b/src/components/widgets/Features.astro
index d7aab28..b1faa9c 100644
--- a/src/components/widgets/Features.astro
+++ b/src/components/widgets/Features.astro
@@ -30,7 +30,7 @@ const {
     title={title}
     subtitle={subtitle}
     tagline={tagline}
-    classes={classes?.headline}
+    classes={classes?.headline as Record<string, string>}
   />
   <ItemGrid
     items={items}
diff --git a/src/components/widgets/Features2.astro b/src/components/widgets/Features2.astro
index 39199ad..6ce5cf0 100644
--- a/src/components/widgets/Features2.astro
+++ b/src/components/widgets/Features2.astro
@@ -29,7 +29,7 @@ const {
     title={title}
     subtitle={subtitle}
     tagline={tagline}
-    classes={classes?.headline}
+    classes={classes?.headline as Record<string, string>}
   />
   <ItemGrid2
     items={items}
diff --git a/src/components/widgets/Features3.astro b/src/components/widgets/Features3.astro
index 024883c..076518e 100644
--- a/src/components/widgets/Features3.astro
+++ b/src/components/widgets/Features3.astro
@@ -31,7 +31,7 @@ const {
   }`}
   bg={bg}
 >
-  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline} />
+  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
 
   <div aria-hidden="true" class="aspect-w-16 aspect-h-7">
     {
diff --git a/src/types.d.ts b/src/types.d.ts
index 1cdc35f..31a82f4 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -97,7 +97,7 @@ export interface Widget {
   id?: string;
   isDark?: boolean;
   bg?: string;
-  classes?: Record<string, string>;
+  classes?: Record<string, string | Record<string, string>>;
 }
 
 export interface Headline {
@@ -208,7 +208,7 @@ export interface Form {
 }
 
 // WIDGETS
-export interface Hero extends Headline, Widget {
+export interface Hero extends Omit<Headline,"classes">, Widget {
   content?: string;
   image?: string | unknown;
   callToAction1?: CallToAction;
@@ -216,29 +216,29 @@ export interface Hero extends Headline, Widget {
   isReversed?: boolean;
 }
 
-export interface Team extends Headline, Widget {
+export interface Team extends Omit<Headline,"classes">, Widget {
   team?: Array<TeamMember>;
 }
 
-export interface Stats extends Headline, Widget {
+export interface Stats extends Omit<Headline,"classes">, Widget {
   stats?: Array<Stat>;
 }
 
-export interface Pricing extends Headline, Widget {
+export interface Pricing extends Omit<Headline,"classes">, Widget {
   prices?: Array<Price>;
 }
 
-export interface Testimonials extends Headline, Widget {
+export interface Testimonials extends Omit<Headline,"classes">, Widget {
   testimonials?: Array<Testimonial>;
   callToAction?: CallToAction;
 }
 
-export interface Brands extends Headline, Widget {
+export interface Brands extends Omit<Headline,"classes">, Widget {
   icons?: Array<string>;
   images?: Array<Image>;
 }
 
-export interface Features extends Headline, Widget {
+export interface Features extends Omit<Headline,"classes">, Widget {
   image?: string | unknown;
   video?: Video;
   items?: Array<Item>;
@@ -251,14 +251,14 @@ export interface Features extends Headline, Widget {
   isAfterContent?: boolean;
 }
 
-export interface Faqs extends Headline, Widget {
+export interface Faqs extends Omit<Headline,"classes">, Widget {
   iconUp?: string;
   iconDown?: string;
   items?: Array<Item>;
   columns?: number;
 }
 
-export interface Steps extends Headline, Widget {
+export interface Steps extends Omit<Headline,"classes">, Widget {
   items: Array<{
     title: string;
     description?: string;
@@ -270,7 +270,7 @@ export interface Steps extends Headline, Widget {
   isReversed?: boolean;
 }
 
-export interface Content extends Headline, Widget {
+export interface Content extends Omit<Headline,"classes">, Widget {
   content?: string;
   image?: string | unknown;
   items?: Array<Item>;
@@ -280,4 +280,4 @@ export interface Content extends Headline, Widget {
   callToAction?: CallToAction;
 }
 
-export interface Contact extends Headline, Form, Widget {}
+export interface Contact extends Omit<Headline,"classes">, Form, Widget {}