diff --git a/web/src/lib/components/cast/cast-button.svelte b/web/src/lib/components/cast/cast-button.svelte
index 87df177e1acfd0..c9db1eca2da7b7 100644
--- a/web/src/lib/components/cast/cast-button.svelte
+++ b/web/src/lib/components/cast/cast-button.svelte
@@ -3,10 +3,15 @@
   import Button from '$lib/components/elements/buttons/button.svelte';
   import { onMount } from 'svelte';
 
-  onMount(async () => {
-    await loadCastFramework();
-    CastPlayer.getInstance();
+  onMount(() => {
+    loadCastFramework();
   });
+
+  window['__onGCastApiAvailable'] = function (isAvailable) {
+    if (isAvailable) {
+      CastPlayer.getInstance();
+    }
+  };
 </script>
 
 <Button size="icon" color="transparent-primary" rounded="lg" on:click>
diff --git a/web/src/lib/utils/cast-player.ts b/web/src/lib/utils/cast-player.ts
index 0dc16f31a1de41..b1751befe8985d 100644
--- a/web/src/lib/utils/cast-player.ts
+++ b/web/src/lib/utils/cast-player.ts
@@ -267,19 +267,11 @@ class CastPlayer {
 
 export default CastPlayer;
 
-export const loadCastFramework = (() => {
-  let promise: Promise<typeof cast> | undefined;
-
-  return async () => {
-    if (promise === undefined) {
-      promise = new Promise(() => {
-        const script = document.createElement('script');
-        script.src = FRAMEWORK_LINK;
-
-        document.body.append(script);
-        console.debug('Cast framework loaded');
-      });
-    }
-    return promise;
-  };
-})();
+export const loadCastFramework = function () {
+  if (!document.querySelector(`script[src="${FRAMEWORK_LINK}"]`)) {
+    const script = document.createElement('script');
+    script.src = FRAMEWORK_LINK;
+    document.body.append(script);
+    console.debug('Loaded cast framework');
+  }
+};