diff --git a/site/src/components/installation/HTMLCdnCodeBlock.tsx b/site/src/components/installation/HTMLCdnCodeBlock.tsx
index 60a6d88a..6296a64d 100644
--- a/site/src/components/installation/HTMLCdnCodeBlock.tsx
+++ b/site/src/components/installation/HTMLCdnCodeBlock.tsx
@@ -1,35 +1,12 @@
 import { useStore } from '@nanostores/react';
 import ClientCode from '@/components/Code/ClientCode';
-import type { Skin, UseCase } from '@/stores/installation';
-import { skin, useCase } from '@/stores/installation';
-
-const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@videojs/html/cdn';
-
-function getCdnFileName(useCase: UseCase, skin: Skin): string {
-  if (useCase === 'background-video') return 'background';
-  if (skin === 'minimal-video') return 'video-minimal';
-  if (skin === 'minimal-audio') return 'audio-minimal';
-  return skin;
-}
-
-function generateCdnCode(useCase: UseCase, skin: Skin): string {
-  if (useCase === 'background-video') {
-    return `<script type="module">
-  import '${CDN_BASE}/background/player.js';
-  import '${CDN_BASE}/background/skin.js';
-</script>
-<link rel="stylesheet" href="${CDN_BASE}/background/skin.css" />`;
-  }
-
-  const name = getCdnFileName(useCase, skin);
-
-  return `<script type="module" src="${CDN_BASE}/${name}.js"></script>
-<link rel="stylesheet" href="${CDN_BASE}/${name}.css" />`;
-}
+import { renderer, skin, useCase } from '@/stores/installation';
+import { generateCdnCode } from '@/utils/installation/cdn-code';
 
 export default function HTMLCdnCodeBlock() {
   const $useCase = useStore(useCase);
   const $skin = useStore(skin);
+  const $renderer = useStore(renderer);
 
-  return <ClientCode code={generateCdnCode($useCase, $skin)} lang="html" />;
+  return <ClientCode code={generateCdnCode($useCase, $skin, $renderer)} lang="html" />;
 }
diff --git a/site/src/utils/installation/__tests__/cdn-code.test.ts b/site/src/utils/installation/__tests__/cdn-code.test.ts
new file mode 100644
index 00000000..f8538937
--- /dev/null
+++ b/site/src/utils/installation/__tests__/cdn-code.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { generateCdnCode } from '../cdn-code';
+
+describe('generateCdnCode', () => {
+  it('generates video preset CDN tags for html5-video', () => {
+    expect(generateCdnCode('default-video', 'video', 'html5-video')).toEqual(
+      `<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video.css" />`
+    );
+  });
+
+  it('includes hls media bundle when renderer is hls', () => {
+    expect(generateCdnCode('default-video', 'minimal-video', 'hls')).toEqual(
+      `<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video-minimal.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/media/hls-video.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video-minimal.css" />`
+    );
+  });
+
+  it('generates background preset CDN tags', () => {
+    expect(generateCdnCode('background-video', 'video', 'background-video')).toEqual(
+      `<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/background.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/background.css" />`
+    );
+  });
+});
diff --git a/site/src/utils/installation/cdn-code.ts b/site/src/utils/installation/cdn-code.ts
new file mode 100644
index 00000000..218a51ae
--- /dev/null
+++ b/site/src/utils/installation/cdn-code.ts
@@ -0,0 +1,32 @@
+import type { Renderer, Skin, UseCase } from '@/stores/installation';
+
+const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@videojs/html/cdn';
+
+function getCdnFileName(useCase: UseCase, skin: Skin): string {
+  if (useCase === 'background-video') return 'background';
+  if (skin === 'minimal-video') return 'video-minimal';
+  if (skin === 'minimal-audio') return 'audio-minimal';
+  return skin;
+}
+
+function getCdnMediaSubpath(renderer: Renderer): string | null {
+  const map: Partial<Record<Renderer, string>> = {
+    hls: 'hls-video',
+  };
+
+  return map[renderer] ?? null;
+}
+
+export function generateCdnCode(useCase: UseCase, skin: Skin, renderer: Renderer): string {
+  const name = getCdnFileName(useCase, skin);
+  const mediaSubpath = getCdnMediaSubpath(renderer);
+
+  const scriptLines = [`<script type="module" src="${CDN_BASE}/${name}.js"></script>`];
+
+  if (mediaSubpath) {
+    scriptLines.push(`<script type="module" src="${CDN_BASE}/media/${mediaSubpath}.js"></script>`);
+  }
+
+  return `${scriptLines.join('\n')}
+<link rel="stylesheet" href="${CDN_BASE}/${name}.css" />`;
+}