diff --git a/.github/workflows/cd-news-player.yml b/.github/workflows/cd-news-player.yml
deleted file mode 100644
index 91d4caa6e..000000000
--- a/.github/workflows/cd-news-player.yml
+++ /dev/null
@@ -1,55 +0,0 @@
-name: Deployment of News player components
-
-on: workflow_dispatch
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: write
-      id-token: write
-
-    steps:
-      - uses: actions/checkout@v4
-        # these if statements ensure that a publication only occurs when
-        # a new release is created:
-        with:
-          fetch-depth: 0 # Fetch all history for all tags and branches
-      - name: read node version from the .nvmrc file
-        run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)
-        shell: bash
-        id: nvmrc
-      - uses: actions/setup-node@v4
-        with:
-          node-version: ${{steps.nvmrc.outputs.NODE_VERSION}}
-          # this line is required for the setup-node action to be able to run the npm publish below.
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Install
-        run: npm ci
-      - name: Clean
-        run: npm run clean
-      # - name: Test
-      #   run: npm test
-      - name: Clean
-        run: npm run clean
-      - name: Build
-        run: npm run build:packages
-
-      # Require the custom version of mux-player and mux-video-ads
-      # Do it here so we still automatically workspace symlink during development.
-      - name: Update NPM @mux/mux-player version to gitpkg url
-        run: npm pkg set dependencies.@mux/mux-player='https://gitpkg.vercel.app/muxinc/elements/packages/mux-player?release-news-player' -w @mux/mux-player-react
-      - name: Update NPM @mux/mux-video-ads version to gitpkg url
-        run: npm pkg set dependencies.@mux/mux-video-ads='https://gitpkg.vercel.app/muxinc/elements/packages/mux-video-ads?release-news-player' -w @mux/mux-player-react
-
-      - uses: fregante/setup-git-user@v2
-      - name: Append !dist to gitignore
-        run: echo '!dist' >> .gitignore
-      - name: Stage dist folders
-        run: git add --all
-      - name: Commit changes to git
-        run: git commit -m "Add dist folders"
-      - name: Force push to release-news-player
-        run: git push -f origin main-news-player:release-news-player
diff --git a/examples/nextjs-with-typescript/package.json b/examples/nextjs-with-typescript/package.json
index 4f763a364..15a3d613d 100644
--- a/examples/nextjs-with-typescript/package.json
+++ b/examples/nextjs-with-typescript/package.json
@@ -19,6 +19,7 @@
     "@mux/mux-uploader-react": ">=1.0.0-beta.0",
     "@mux/mux-video": ">=0.3.0",
     "@mux/mux-video-react": ">=0.3.0",
+    "media-chrome": "^4.9.0",
     "next": "^14.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/nextjs-with-typescript/pages/MuxNewsPlayer.tsx b/examples/nextjs-with-typescript/pages/MuxNewsPlayer.tsx
new file mode 100644
index 000000000..094581dc0
--- /dev/null
+++ b/examples/nextjs-with-typescript/pages/MuxNewsPlayer.tsx
@@ -0,0 +1,81 @@
+import Head from 'next/head';
+import Script from 'next/script';
+import { useState } from 'react';
+import MuxNewsPlayer from '@mux/mux-player-react/news';
+
+function MuxNewsPlayerPage() {
+
+  const relatedVideos = [
+    {
+      imageUrl: "https://image.mux.com/gZh02tKCI015W6k2XdYSh4srGnksYvsoT1uHsYOlv4Blo/thumbnail.webp",
+      title: "Test video title 1",
+      playbackId: "gZh02tKCI015W6k2XdYSh4srGnksYvsoT1uHsYOlv4Blo",
+      adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
+    },
+    {
+      imageUrl: "https://image.mux.com/VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA/thumbnail.webp",
+      title: "Test video title 2",
+      playbackId: "VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA",
+      adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpreonly&ciu_szs=300x250%2C728x90&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator=",
+    },
+    {
+      imageUrl: "https://image.mux.com/maVbJv2GSYNRgS02kPXOOGdJMWGU1mkA019ZUjYE7VU7k/thumbnail.webp",
+      title: "Test video title 3",
+      playbackId: "maVbJv2GSYNRgS02kPXOOGdJMWGU1mkA019ZUjYE7VU7k",
+      adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpreonlybumper&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator=",
+    },
+  ];
+
+  const [sdkReady, setSdkReady] = useState(false);
+
+  return (
+    <>
+      <Head>
+        <title>&lt;MuxNewsPlayer/&gt; (POC) Demo</title>
+      </Head>
+
+      <Script
+        src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"
+        onReady={() => {
+          setSdkReady(true);
+          console.log("Google IMA SDK loaded");
+        }}
+        onError={() => {
+          setSdkReady(true);
+          console.log("Google IMA SDK failed to load");
+        }}
+        strategy="afterInteractive"
+      />
+      
+      {sdkReady && 
+        <MuxNewsPlayer
+          allowAdBlocker={true}
+          videoList={relatedVideos}
+          onLoadStart={() => console.log('Load Start')}
+          onLoadedMetadata={() => console.log('Loaded Metadata')}
+          onPlay={() => console.log('Play')}
+          onPlaying={() => console.log('Playing')}
+          onPause={() => console.log('Pause')}
+          onEnded={() => console.log('Ended')}
+          onAdRequest={() => console.log('Ad Request')}
+          onAdResponse={() => console.log('Ad Response')}
+          onAdImpression={() => console.log('Ad Impression')}
+          onAdBreakStart={() => console.log('Ad Break Start')}
+          onAdPlay={() => console.log('Ad Play')}
+          onAdPlaying={() => console.log('Ad Playing')}
+          onAdPause={() => console.log('Ad Pause')}
+          onAdFirstQuartile={() => console.log('Ad First Quartile')}
+          onAdMidpoint={() => console.log('Ad Midpoint')}
+          onAdThirdQuartile={() => console.log('Ad Third Quartile')}
+          onAdClick={() => console.log('Ad Click')}
+          onAdSkip={() => console.log('Ad Skip')}
+          onAdClose={() => console.log('Ad Close')}
+          onAdEnded={() => console.log('Ad Ended')}
+          onAdBreakEnd={() => console.log('Ad Break End')}
+          onAdError={() => console.log('Ad Error')}
+        />}
+    </>
+  );
+}
+
+export default MuxNewsPlayerPage;
diff --git a/examples/nextjs-with-typescript/pages/MuxPlayerAds.tsx b/examples/nextjs-with-typescript/pages/MuxPlayerAds.tsx
new file mode 100644
index 000000000..8d49abd55
--- /dev/null
+++ b/examples/nextjs-with-typescript/pages/MuxPlayerAds.tsx
@@ -0,0 +1,121 @@
+import Script from 'next/script';
+import Head from 'next/head';
+import { useState } from 'react';
+import MuxPlayer from '@mux/mux-player-react/ads';
+import NewsTheme from '@mux/mux-player-react/themes/news';
+
+function MuxPlayerAdsPage() {
+  const [sdkReady, setSdkReady] = useState(false);
+  const [adTagUrl, setAdTagUrl] = useState<string | undefined>(undefined);
+  const [inputUrl, setInputUrl] = useState<string>(
+    'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator='
+  );
+  
+  const handleSetAdTag = () => {
+    setAdTagUrl(inputUrl);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputUrl(e.target.value);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>&lt;MuxPlayer/&gt; (ads) Demo</title>
+      </Head>
+
+      <Script
+        src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"
+        onReady={() => {
+          setSdkReady(true);
+          console.log("Google IMA SDK loaded");
+        }}
+        onError={() => {
+          setSdkReady(true);
+          console.log("Google IMA SDK failed to load");
+        }}
+        strategy="afterInteractive"
+      />
+
+      {/*
+        single preroll skippable
+        adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
+
+        single postroll
+        adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpostonly&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator="
+
+        VMAP - Pre-roll Single Ad, Mid-roll Standard Pod with 3 ads, Post-roll Single Ad
+        adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostpod&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="
+      */}
+
+      <div style={{ margin: '20px 0', maxWidth: '800px' }}>
+        <div style={{ marginBottom: '10px' }}>
+          <label htmlFor="adTagInput" style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>Ad Tag URL:</label>
+          <input
+            id="adTagInput"
+            type="text"
+            value={inputUrl}
+            onChange={handleInputChange}
+            style={{
+              width: '100%',
+              padding: '8px',
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+              marginBottom: '10px',
+              fontFamily: 'monospace',
+              fontSize: '14px'
+            }}
+          />
+        </div>
+        <button 
+          onClick={handleSetAdTag}
+          style={{
+            padding: '10px 15px',
+            backgroundColor: '#333',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            marginBottom: '20px',
+            fontSize: '14px'
+          }}
+        >
+          Set Ad Tag URL
+        </button>
+      </div>
+
+      {sdkReady && <MuxPlayer
+        adTagUrl={adTagUrl}
+        theme={NewsTheme}
+        streamType="on-demand"
+        playbackId="ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2s"
+        allowAdBlocker={true}
+        onAdRequest={() => console.log('Ad Request')}
+        onAdResponse={() => console.log('Ad Response')}
+        onAdImpression={() => console.log('Ad Impression')}
+        onAdBreakStart={() => console.log('Ad Break Start')}
+        onAdPlay={() => console.log('Ad Play')}
+        onAdPlaying={() => console.log('Ad Playing')}
+        onError={(e) => console.error('Player error:', e)}
+        onAdPause={() => console.log('Ad Pause')}
+        onAdFirstQuartile={() => console.log('Ad First Quartile')}
+        onAdMidpoint={() => console.log('Ad Midpoint')}
+        onAdThirdQuartile={() => console.log('Ad Third Quartile')}
+        onAdClick={() => console.log('Ad Click')}
+        onAdSkip={() => console.log('Ad Skip')}
+        onAdClose={() => console.log('Ad Close')}
+        onAdEnded={() => console.log('Ad Ended')}
+        onAdBreakEnd={() => console.log('Ad Break End')}
+        onAdError={() => console.log('Ad Error')}
+        metadata={{
+          video_id: "video-id-12345",
+          video_title: "Elephants Dream",
+          viewer_user_id: "user-id-6789",
+        }}
+      />}
+    </>
+  );
+}
+
+export default MuxPlayerAdsPage;
diff --git a/examples/nextjs-with-typescript/pages/MuxPlayerCuePoints.tsx b/examples/nextjs-with-typescript/pages/MuxPlayerCuePoints.tsx
index 1fbab33fe..57710db6d 100644
--- a/examples/nextjs-with-typescript/pages/MuxPlayerCuePoints.tsx
+++ b/examples/nextjs-with-typescript/pages/MuxPlayerCuePoints.tsx
@@ -34,9 +34,6 @@ function MuxPlayerPage() {
         onCuePointChange={({ target }) => {
           setActiveCuePoint((target as MuxPlayerElement).activeCuePoint);
         }}
-        onCuePointsChange={({ target }) => {
-          setActiveCuePoint((target as MuxPlayerElement).activeCuePoint);
-        }}
       />
       <div>
         <b>Active CuePoint:</b>
diff --git a/examples/nextjs-with-typescript/pages/MuxPlayerError.tsx b/examples/nextjs-with-typescript/pages/MuxPlayerError.tsx
new file mode 100644
index 000000000..e10bb8003
--- /dev/null
+++ b/examples/nextjs-with-typescript/pages/MuxPlayerError.tsx
@@ -0,0 +1,22 @@
+/* eslint-disable @next/next/no-img-element */
+import Head from 'next/head';
+import MuxPlayer from "@mux/mux-player-react";
+
+function MuxPlayerPage() {
+  return (
+    <>
+      <Head>
+        <title>&lt;MuxPlayer/&gt; (error) Demo</title>
+      </Head>
+
+      <MuxPlayer
+        playbackId="ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2"
+        onError={(error) => {
+          console.error('MuxPlayer onError', error);
+        }}
+      />
+    </>
+  );
+}
+
+export default MuxPlayerPage;
diff --git a/examples/nextjs-with-typescript/pages/index.tsx b/examples/nextjs-with-typescript/pages/index.tsx
index 7aafa8b86..ab5b8f00c 100644
--- a/examples/nextjs-with-typescript/pages/index.tsx
+++ b/examples/nextjs-with-typescript/pages/index.tsx
@@ -7,6 +7,9 @@ function HomePage() {
         <li><Link href="/MuxVideo" className="video">&lt;MuxVideo&gt;</Link></li>
         <li><Link href="/MuxAudio"className="audio">&lt;MuxAudio&gt;</Link></li>
         <li><Link href='/MuxPlayer?playbackId="ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2s"' className="player">&lt;MuxPlayer&gt;</Link></li>
+        <li><Link href="/MuxPlayerAds" className="player"><>&lt;MuxPlayer&gt;<br />(ads)</></Link></li>
+        <li><Link href="/MuxNewsPlayer" className="player"><>&lt;MuxNewsPlayer&gt;<br />(ads + playlist)</></Link></li>
+        <li><Link href='/MuxPlayerError' className="player">&lt;MuxPlayer&gt; (error)</Link></li>
         <li><Link href="/MuxPlayerPosterSlot" className="player"><>&lt;MuxPlayer&gt;<br/>(poster slot)</></Link></li>
         <li><Link href="/MuxPlayerTheme" className="player"><>&lt;MuxPlayer&gt;<br/>(theme)</></Link></li>
         <li><Link href="/MuxPlayerCuePoints" className="player"><>&lt;MuxPlayer&gt;<br/>(CuePoints)</></Link></li>
@@ -24,6 +27,7 @@ function HomePage() {
         <li><Link href="/mux-audio" className="audio"><>&lt;mux-audio&gt;<br/>(Web Component)</></Link></li>
         <li><Link href="/mux-player" className="player"><>&lt;mux-player&gt;<br/>(Web Component)</></Link></li>
         <li><Link href="/mux-video-react" className="video"><>&lt;MuxVideo&gt;<br/>(React Web Component)</></Link></li>
+        <li><Link href="/mux-video-ads-react" className="video"><>&lt;MuxVideo&gt; (ads)<br />(React Web Component)</></Link></li>
         <li><Link href="/app-router" className="react"><>App Router</></Link></li>
       </ul>
     </nav>
diff --git a/examples/nextjs-with-typescript/pages/mux-video-ads-react.tsx b/examples/nextjs-with-typescript/pages/mux-video-ads-react.tsx
new file mode 100644
index 000000000..380bcb5af
--- /dev/null
+++ b/examples/nextjs-with-typescript/pages/mux-video-ads-react.tsx
@@ -0,0 +1,119 @@
+import Head from 'next/head';
+import Script from 'next/script';
+import { useRef, useState, useEffect } from 'react';
+import MuxVideoAds from '@mux/mux-video/ads/react';
+
+function MuxVideoPage() {
+  const mediaElRef = useRef(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [sdkReady, setSdkReady] = useState(false);
+  const [eventLogs, setEventLogs] = useState<string[]>([]);
+
+  // Function to log events to the textarea
+  const logEvent = (event: string) => {
+    const timestamp = new Date().toISOString().substr(11, 12);
+    setEventLogs(prev => [...prev, `${timestamp} - ${event}`]);
+  };
+
+  // Auto-scroll textarea to bottom when logs update if scrolled
+  useEffect(() => {
+    if (textareaRef.current) {
+      const isScrolledToEnd = textareaRef.current.scrollTop >= textareaRef.current.scrollHeight - textareaRef.current.offsetHeight - 50;
+      if (isScrolledToEnd) {
+        textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
+      }
+    }
+  }, [eventLogs]);
+
+  // Set up event listeners when video element is available
+  useEffect(() => {
+    const videoElement = mediaElRef.current;
+    if (!videoElement || !sdkReady) return;
+
+    const { Events } = (videoElement.constructor as typeof MuxVideoElement);
+
+    // Create event handler functions mapped by event name
+    const eventHandlers = Events.reduce((handlers, eventName) => {
+      handlers[eventName] = () => logEvent(eventName);
+      return handlers;
+    }, {} as Record<string, () => void>);
+
+    // Add event listeners
+    Events.forEach(eventName => {
+      videoElement.addEventListener(eventName, eventHandlers[eventName]);
+    });
+
+    return () => {
+      if (!videoElement) return;
+      // Remove event listeners using the same handler references
+      Events.forEach(eventName => {
+        videoElement.removeEventListener(eventName, eventHandlers[eventName]);
+      });
+    };
+  }, [sdkReady]);
+
+  return (
+    <>
+      <Head>
+        <title>&lt;MuxVideoAds/&gt; Demo</title>
+      </Head>
+
+      <Script
+        src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"
+        onReady={() => {
+          setSdkReady(true);
+          logEvent("Google IMA SDK loaded");
+        }}
+        onError={() => {
+          setSdkReady(true);
+          logEvent("Google IMA SDK failed to load");
+        }}
+        strategy="afterInteractive"
+      />
+
+      {/*
+        single preroll skippable
+        adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
+
+        single postroll
+        adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpostonly&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator="
+
+        VMAP - Pre-roll Single Ad, Mid-roll Standard Pod with 3 ads, Post-roll Single Ad
+        adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostpod&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="
+      */}
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '800px', margin: '0 auto' }}>
+        {sdkReady && <MuxVideoAds
+          ref={mediaElRef}
+          playbackId="VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA"
+          controls
+          playsInline={true}
+          preferPlayback="mse"
+          allowAdBlocker={true}
+          adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
+        />}
+        
+        <div>
+          <h3>Event Log</h3>
+          <textarea
+            ref={textareaRef}
+            readOnly
+            value={eventLogs.join('\n')}
+            style={{
+              width: '100%',
+              height: '300px',
+              fontFamily: 'monospace',
+              fontSize: '14px',
+              padding: '8px',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+              overflowY: 'auto'
+            }}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default MuxVideoPage;
diff --git a/examples/nextjs-with-typescript/styles.css b/examples/nextjs-with-typescript/styles.css
index 71036936e..d826f0ce8 100644
--- a/examples/nextjs-with-typescript/styles.css
+++ b/examples/nextjs-with-typescript/styles.css
@@ -110,6 +110,7 @@ mux-video:not([audio]),
 video {
   aspect-ratio: 16 / 9;
   background: #000;
+  overflow: hidden;
 }
 
 .component-page {
diff --git a/examples/nextjs-with-typescript/tsconfig.json b/examples/nextjs-with-typescript/tsconfig.json
index cf9bc50d9..94e9c28c8 100644
--- a/examples/nextjs-with-typescript/tsconfig.json
+++ b/examples/nextjs-with-typescript/tsconfig.json
@@ -15,7 +15,7 @@
     "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
diff --git a/examples/vanilla-ts-esm/public/index.html b/examples/vanilla-ts-esm/public/index.html
index 9cf5c9bc7..f33441c2f 100644
--- a/examples/vanilla-ts-esm/public/index.html
+++ b/examples/vanilla-ts-esm/public/index.html
@@ -27,8 +27,10 @@ <h1><a href="/">Elements</a></h1>
     <nav>
       <ul>
         <li><a href="./mux-video.html" class="video">&lt;mux-video&gt;</a></li>
+        <li><a href="./mux-video-ads.html" class="video">&lt;mux-video&gt; (with ads)</a></li>
         <li><a href="./mux-audio.html" class="audio">&lt;mux-audio&gt;</a></li>
         <li><a href="./mux-player.html" class="player">&lt;mux-player&gt;</a></li>
+        <li><a href="./mux-player-ads.html" class="player">&lt;mux-player&gt; (with ads)</a></li>
         <li><a href="./mux-player-error.html" class="player">&lt;mux-player&gt; (error)</a></li>
         <li><a href="./mux-player-audio.html" class="player">&lt;mux-player audio&gt;</a></li>
         <li><a href="./mux-player-cuepoints.html" class="player">&lt;mux-player&gt; (cuePoints)</a></li>
diff --git a/examples/vanilla-ts-esm/public/mux-player-ads.html b/examples/vanilla-ts-esm/public/mux-player-ads.html
new file mode 100644
index 000000000..09179a6c5
--- /dev/null
+++ b/examples/vanilla-ts-esm/public/mux-player-ads.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width" />
+    <title>&lt;mux-player&gt; ads example</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
+    <link rel="stylesheet" href="./styles.css">
+    <script defer src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
+    <script type="module" src="./dist/mux-player-ads.js"></script>
+    <style>
+      mux-player {
+        display: block;
+        width: 100%;
+        margin: 1rem 0 2rem;
+        background-color: #000;
+      }
+
+      mux-player:not([audio]) {
+        aspect-ratio: 16 / 9;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <div class="left-header">
+        <a class="mux-logo" href="https://www.mux.com/player" target="_blank">
+          <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/360826/233653989-11cd8603-c20f-4008-8bf7-dc15b743c52b.svg">
+            <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/360826/233653583-50dda726-cbe7-4182-a113-059a91ae83e6.svg">
+            <img alt="Mux Logo" src="https://user-images.githubusercontent.com/360826/233653583-50dda726-cbe7-4182-a113-059a91ae83e6.svg">
+          </picture>
+        </a>
+        <h1><a href="/">Elements</a></h1>
+      </div>
+      <div class="right-header">
+        <a class="github-logo" href="https://github.com/muxinc/elements" target="_blank">
+          <img width="32" height="32" src="./images/github-logo.svg" alt="Github logo">
+        </a>
+      </div>
+    </header>
+
+    <h2>Mux Player Ads</h2>
+
+    <mux-player
+      stream-type="on-demand"
+      playback-id="ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2s"
+      ad-tag-url="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
+    ></mux-player>
+
+    <a href="../">Browse Elements</a>
+  </body>
+</html>
diff --git a/examples/vanilla-ts-esm/public/mux-player-error.html b/examples/vanilla-ts-esm/public/mux-player-error.html
index 7d0d853f8..a40411091 100644
--- a/examples/vanilla-ts-esm/public/mux-player-error.html
+++ b/examples/vanilla-ts-esm/public/mux-player-error.html
@@ -41,7 +41,7 @@ <h1><a href="/">Elements</a></h1>
     <!-- Correct playbackid: ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2s -->
     <mux-player
       stream-type="on-demand"
-      playback-id="Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB00"
+      playback-id="ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2"
     ></mux-player>
 
     <button id="load-video-btn">Load new playback id</button>
diff --git a/examples/vanilla-ts-esm/public/mux-video-ads.html b/examples/vanilla-ts-esm/public/mux-video-ads.html
new file mode 100644
index 000000000..daab1637e
--- /dev/null
+++ b/examples/vanilla-ts-esm/public/mux-video-ads.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width" />
+    <title>&lt;mux-video&gt; ads example</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
+    <link rel="stylesheet" href="./styles.css">
+    <script defer src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
+    <script type="module" src="./dist/mux-video-ads.js"></script>
+    <style>
+        mux-video {
+            display: block;
+            width: 100%;
+            aspect-ratio: 16 / 9;
+            margin: 1rem 0 2rem;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="left-header">
+            <a class="mux-logo" href="https://www.mux.com/player" target="_blank">
+                <picture>
+                    <source media="(prefers-color-scheme: dark)"
+                        srcset="https://user-images.githubusercontent.com/360826/233653989-11cd8603-c20f-4008-8bf7-dc15b743c52b.svg">
+                    <source media="(prefers-color-scheme: light)"
+                        srcset="https://user-images.githubusercontent.com/360826/233653583-50dda726-cbe7-4182-a113-059a91ae83e6.svg">
+                    <img alt="Mux Logo"
+                        src="https://user-images.githubusercontent.com/360826/233653583-50dda726-cbe7-4182-a113-059a91ae83e6.svg">
+                </picture>
+            </a>
+            <h1><a href="/">Elements</a></h1>
+        </div>
+        <div class="right-header">
+            <a class="github-logo" href="https://github.com/muxinc/elements" target="_blank">
+                <img width="32" height="32" src="./images/github-logo.svg" alt="Github logo">
+            </a>
+        </div>
+    </header>
+    <!--
+      Description of attributes:
+      debug: Add/remove to enable/disable hls.js, mux-embed (mux data sdk), and elements debug logging.
+      metadata-*: values that will be sent to Mux Data for corresponding data views
+      prefer-playback: Add/remove to prefer e.g. MSE/hls.js even on playback environments that normally wouldn't
+        (e.g. on Mobile Safari to test Google IMA + MSE behaviors for that platform)
+      playsinline: Add/remove to test fullscreen vs. inline behaviors on mobile devices when using Google IMA with ad permutations and playback environments
+        (e.g. skippable ads on Mobile Safari)
+      autoplay: Add/remove to test Google IMA with autoplay enabled/disabled
+     -->
+    <mux-video
+        debug
+        playback-id="a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M"
+        metadata-video-id="this-is-a-video--with-ads"
+        metadata-video-title="I AM TESTING ADS"
+        metadata-viewer-user-id="user-is-testing-ads"
+        prefer-playback="mse"
+        playsinline
+        controls
+        ad-tag-url="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
+    ></mux-video>
+
+    <a href="../">Browse Elements</a>
+</body>
+</html>
diff --git a/examples/vanilla-ts-esm/src/mux-player-ads.ts b/examples/vanilla-ts-esm/src/mux-player-ads.ts
new file mode 100644
index 000000000..58b6293d8
--- /dev/null
+++ b/examples/vanilla-ts-esm/src/mux-player-ads.ts
@@ -0,0 +1 @@
+export * as MuxPlayer from "@mux/mux-player/ads";
diff --git a/examples/vanilla-ts-esm/src/mux-video-ads.ts b/examples/vanilla-ts-esm/src/mux-video-ads.ts
new file mode 100644
index 000000000..377328cbf
--- /dev/null
+++ b/examples/vanilla-ts-esm/src/mux-video-ads.ts
@@ -0,0 +1 @@
+export * as MuxVideo from "@mux/mux-video/ads";
diff --git a/package-lock.json b/package-lock.json
index febd7059e..ff8d2f688 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -238,6 +238,7 @@
         "@mux/mux-uploader-react": ">=1.0.0-beta.0",
         "@mux/mux-video": ">=0.3.0",
         "@mux/mux-video-react": ">=0.3.0",
+        "media-chrome": "^4.9.0",
         "next": "^14.2.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -384,6 +385,15 @@
         "node": ">= 4"
       }
     },
+    "examples/nextjs-with-typescript/node_modules/media-chrome": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/media-chrome/-/media-chrome-4.9.0.tgz",
+      "integrity": "sha512-KSGZUDEt0vg0Ogx+B8YYj0O32l0ppPLR8s5rXBMOEpkLYbJrKfhSPfwTmjJGcp2Nf3F/X2ddwO96YvUXHYeYvw==",
+      "license": "MIT",
+      "dependencies": {
+        "ce-la-react": "^0.1.3"
+      }
+    },
     "examples/nextjs-with-typescript/node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4820,6 +4830,15 @@
       "resolved": "packages/mux-audio-react",
       "link": true
     },
+    "node_modules/@mux/mux-data-google-ima": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@mux/mux-data-google-ima/-/mux-data-google-ima-0.2.8.tgz",
+      "integrity": "sha512-0ZEkHdcZ6bS8QtcjFcoJeZxJTpX7qRIledf4q1trMWPznugvtajCjCM2kieK/pzkZj1JM6liDRFs1PJSfVUs2A==",
+      "license": "MIT",
+      "dependencies": {
+        "mux-embed": "5.9.0"
+      }
+    },
     "node_modules/@mux/mux-elements-codemod": {
       "resolved": "packages/mux-elements-codemod",
       "link": true
@@ -17496,10 +17515,9 @@
       "license": "MIT"
     },
     "node_modules/mux-embed": {
-      "version": "5.8.3",
-      "resolved": "https://registry.npmjs.org/mux-embed/-/mux-embed-5.8.3.tgz",
-      "integrity": "sha512-cNI/5StDDc6R8hBuMI61QPUn0j4NkPhs+lj8IQ1s75HIUnJJEgox8EtmH97G5itB8ZZIzDTw8Ycm77VP1km22A==",
-      "license": "MIT"
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/mux-embed/-/mux-embed-5.9.0.tgz",
+      "integrity": "sha512-wmunL3uoPhma/tWy8PrDPZkvJpXvSFBwbD3KkC4PG8Ztjfb1X3hRJwGUAQyRz7z99b/ovLm2UTTitrkvStjH4w=="
     },
     "node_modules/nanocolors": {
       "version": "0.2.13",
@@ -30562,6 +30580,7 @@
       "version": "0.25.3",
       "license": "MIT",
       "dependencies": {
+        "@mux/mux-data-google-ima": "0.2.8",
         "@mux/playback-core": "0.29.1",
         "castable-video": "~1.1.10",
         "custom-media-element": "~1.4.5",
@@ -30569,6 +30588,7 @@
       },
       "devDependencies": {
         "@open-wc/testing": "^4.0.0",
+        "@types/google_interactive_media_ads_types": "^3.697.0",
         "@typescript-eslint/eslint-plugin": "^8.27.0",
         "@typescript-eslint/parser": "^8.27.0",
         "@web/dev-server-esbuild": "^1.0.4",
@@ -31711,6 +31731,13 @@
         "node": ">=18"
       }
     },
+    "packages/mux-video/node_modules/@types/google_interactive_media_ads_types": {
+      "version": "3.697.0",
+      "resolved": "https://registry.npmjs.org/@types/google_interactive_media_ads_types/-/google_interactive_media_ads_types-3.697.0.tgz",
+      "integrity": "sha512-BvhC/zIqh6y0XvUQW75dq7JpZ6B9ZRs3KsxSh5dbY2kA9hKhBoTUob7MPl/2qZMbY9a6XSeO9y+rI+juCCe+ew==",
+      "dev": true,
+      "license": "MIT"
+    },
     "packages/mux-video/node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.27.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.27.0.tgz",
diff --git a/packages/mux-player-react/package.json b/packages/mux-player-react/package.json
index d0d752d4a..51adf1cc2 100644
--- a/packages/mux-player-react/package.json
+++ b/packages/mux-player-react/package.json
@@ -20,8 +20,8 @@
       "themes/*": [
         "./dist/types-ts3.4/themes/*.d.ts"
       ],
-      "lazy": [
-        "./dist/types-ts3.4/lazy.d.ts"
+      "*": [
+        "./dist/types-ts3.4/*.d.ts"
       ]
     },
     "*": {
@@ -31,8 +31,8 @@
       "themes/*": [
         "./dist/types/themes/*.d.ts"
       ],
-      "lazy": [
-        "./dist/types/lazy.d.ts"
+      "*": [
+        "./dist/types/*.d.ts"
       ]
     }
   },
@@ -50,12 +50,26 @@
       "import": "./dist/lazy.mjs",
       "default": "./dist/lazy.mjs"
     },
+    "./news": {
+      "types@<4.3.5": "./dist/types-ts3.4/news/index.d.ts",
+      "types": "./dist/types/news/index.d.ts",
+      "import": "./dist/news/index.mjs",
+      "require": "./dist/news/index.cjs.js",
+      "default": "./dist/news/index.cjs.js"
+    },
     "./themes/*": {
       "types@<4.3.5": "./dist/types-ts3.4/themes/*.d.ts",
       "types": "./dist/types/themes/*.d.ts",
       "import": "./dist/themes/*.mjs",
       "require": "./dist/themes/*.cjs.js",
       "default": "./dist/themes/*.cjs.js"
+    },
+    "./*": {
+      "types@<4.3.5": "./dist/types-ts3.4/*.d.ts",
+      "types": "./dist/types/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.cjs.js",
+      "default": "./dist/*.mjs"
     }
   },
   "types": "./dist/types/index.d.ts",
@@ -68,19 +82,21 @@
   "license": "MIT",
   "scripts": {
     "clean": "shx rm -rf dist/",
-    "dev:cjs": "npm run build:cjs -- --watch=forever",
-    "dev:esm": "npm run build:esm -- --watch=forever",
-    "dev:cjs:lazy": "echo 'esbuild cjs does not support code-splitting. See https://esbuild.github.io/api/#splitting for details'",
-    "dev:esm:lazy": "npm run build:esm:lazy -- --watch=forever",
     "dev:types": "npm run build:types -- -w",
-    "dev": "npm-run-all --parallel dev:types dev:cjs dev:esm dev:esm:lazy",
-    "build:cjs": "esbuild src/index.tsx src/themes/*.ts --target=es2019 --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --loader:.css=text --outdir=dist --out-extension:.js=.cjs.js --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
-    "build:esm": "esbuild src/index.tsx src/themes/*.ts --target=es2019 --bundle --sourcemap --metafile=./dist/esm.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "dev:esm": "npm-run-all --parallel 'build:esm:** -- --watch=forever'",
+    "dev:cjs": "npm-run-all --parallel 'build:cjs:** -- --watch=forever'",
+    "dev": "npm-run-all --parallel dev:types dev:esm dev:cjs",
+    "build:cjs:index": "esbuild src/index.tsx src/themes/*.ts --target=es2019 --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --loader:.css=text --outdir=dist --out-extension:.js=.cjs.js --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:esm:index": "esbuild src/index.tsx src/themes/*.ts --target=es2019 --bundle --sourcemap --metafile=./dist/esm.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:esm:news": "esbuild src/news/index.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/news/esm.json --format=esm --loader:.css=text --outdir=dist/news --out-extension:.js=.mjs --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:cjs:news": "esbuild src/news/index.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/news/cjs.json --format=cjs --loader:.css=text --outdir=dist/news --out-extension:.js=.cjs.js --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:esm:ads": "esbuild src/ads.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/esm.ads.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:cjs:ads": "esbuild src/ads.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/cjs.ads.json --format=cjs --loader:.css=text --outdir=dist --out-extension:.js=.cjs.js --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
     "build:cjs:lazy": "echo 'esbuild cjs does not support code-splitting. See https://esbuild.github.io/api/#splitting for details'",
     "build:esm:lazy": "esbuild src/lazy.tsx --splitting --target=es2019 --bundle --sourcemap --metafile=./dist/esm.lazy.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:@mux/* --external:prop-types --define:PLAYER_VERSION=\"'$npm_package_version'\"",
     "build:types": "tsc",
     "postbuild:types": "downlevel-dts ./dist/types ./dist/types-ts3.4",
-    "build": "npm-run-all --parallel 'build:cjs -- --minify' 'build:esm -- --minify' 'build:esm:lazy -- --minify'"
+    "build": "npm-run-all --parallel 'build:cjs:* -- --minify' 'build:esm:* -- --minify'"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^17.0.0-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0",
diff --git a/packages/mux-player-react/src/ads.tsx b/packages/mux-player-react/src/ads.tsx
new file mode 100644
index 000000000..2f60370ad
--- /dev/null
+++ b/packages/mux-player-react/src/ads.tsx
@@ -0,0 +1,60 @@
+'use client';
+import React, { forwardRef, useRef } from 'react';
+// Register <mux-player> (ads) web component.
+import '@mux/mux-player/ads';
+import MuxPlayer from '@mux/mux-player-react';
+import type { GenericEventListener, Props as MuxPlayerIndexProps } from '@mux/mux-player-react';
+import { useComposedRefs } from './useComposedRefs';
+import { useEventCallbackEffect } from './useEventCallbackEffect';
+import type MuxPlayerElement from '@mux/mux-player/ads';
+import type { EventMap as MuxPlayerElementEventMap } from '@mux/mux-player/ads';
+
+export interface MuxPlayerProps extends Omit<MuxPlayerIndexProps, 'playerSoftwareVersion' | 'playerSoftwareName'> {
+  adTagUrl?: string;
+  allowAdBlocker?: boolean;
+
+  onAdRequest?: GenericEventListener<MuxPlayerElementEventMap['adrequest']>;
+  onAdResponse?: GenericEventListener<MuxPlayerElementEventMap['adresponse']>;
+  onAdImpression?: GenericEventListener<MuxPlayerElementEventMap['adimpression']>;
+  onAdBreakStart?: GenericEventListener<MuxPlayerElementEventMap['adbreakstart']>;
+  onAdPlay?: GenericEventListener<MuxPlayerElementEventMap['adplay']>;
+  onAdPlaying?: GenericEventListener<MuxPlayerElementEventMap['adplaying']>;
+  onAdPause?: GenericEventListener<MuxPlayerElementEventMap['adpause']>;
+  onAdFirstQuartile?: GenericEventListener<MuxPlayerElementEventMap['adfirstquartile']>;
+  onAdMidpoint?: GenericEventListener<MuxPlayerElementEventMap['admidpoint']>;
+  onAdThirdQuartile?: GenericEventListener<MuxPlayerElementEventMap['adthirdquartile']>;
+  onAdError?: GenericEventListener<MuxPlayerElementEventMap['aderror']>;
+  onAdClick?: GenericEventListener<MuxPlayerElementEventMap['adclick']>;
+  onAdSkip?: GenericEventListener<MuxPlayerElementEventMap['adskip']>;
+  onAdEnded?: GenericEventListener<MuxPlayerElementEventMap['adended']>;
+  onAdBreakEnd?: GenericEventListener<MuxPlayerElementEventMap['adbreakend']>;
+  onAdClose?: GenericEventListener<MuxPlayerElementEventMap['adclose']>;
+}
+
+const MuxPlayerAds = forwardRef<MuxPlayerElement, MuxPlayerProps>((props, ref) => {
+  const playerRef = useRef<MuxPlayerElement>(null);
+
+  const adEventProps: Record<string, (e: Event) => void> = {};
+  const reactProps: Record<string, unknown> = {};
+
+  for (const [k, v] of Object.entries(props)) {
+    if (k.startsWith('onAd')) {
+      adEventProps[k] = v;
+    } else {
+      reactProps[k] = v;
+    }
+  }
+
+  // Set up event listeners on the custom element.
+  // Still handle events for React 19+ because they don't yet offer
+  // a way to have nicely camelCased event prop names on custom elements.
+  for (const propName in adEventProps) {
+    const callback = adEventProps[propName as keyof typeof adEventProps];
+    const eventName = propName.slice(2).toLowerCase() as keyof MuxPlayerElementEventMap;
+    useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>(eventName, playerRef, callback);
+  }
+
+  return <MuxPlayer ref={useComposedRefs(playerRef, ref)} {...reactProps} />;
+});
+
+export default MuxPlayerAds;
diff --git a/packages/mux-player-react/src/declaration.d.ts b/packages/mux-player-react/src/declaration.d.ts
new file mode 100644
index 000000000..35306c6fc
--- /dev/null
+++ b/packages/mux-player-react/src/declaration.d.ts
@@ -0,0 +1 @@
+declare module '*.css';
diff --git a/packages/mux-player-react/src/index.tsx b/packages/mux-player-react/src/index.tsx
index 77c4cb2f7..a4d9164ea 100644
--- a/packages/mux-player-react/src/index.tsx
+++ b/packages/mux-player-react/src/index.tsx
@@ -1,140 +1,18 @@
 'use client';
-import React, { useEffect, useState } from 'react';
-import type { CSSProperties } from 'react';
-import type {
-  StreamTypes,
-  PlaybackTypes,
-  CmcdTypes,
-  MaxResolutionValue,
-  MinResolutionValue,
-  RenditionOrderValue,
-} from '@mux/playback-core';
+import React, { useState, useRef } from 'react';
 import { MaxResolution, MinResolution, RenditionOrder, generatePlayerInitTime } from '@mux/playback-core';
 import { MediaError } from '@mux/mux-player';
 import type MuxPlayerElement from '@mux/mux-player';
-import type { Tokens, MuxPlayerElementEventMap } from '@mux/mux-player';
+import type { MuxPlayerElementEventMap } from '@mux/mux-player';
 import { toNativeProps } from './common/utils';
-import { useRef } from 'react';
 import { useComposedRefs } from './useComposedRefs';
 import useObjectPropEffect, { defaultHasChanged } from './useObjectPropEffect';
 import { getPlayerVersion } from './env';
+import { useEventCallbackEffect } from './useEventCallbackEffect';
+import type { MuxPlayerProps, MuxPlayerRefAttributes } from './types';
 
 export { MediaError, MaxResolution, MinResolution, RenditionOrder, generatePlayerInitTime };
-
-type ValueOf<T> = T[keyof T];
-interface GenericEventListener<T extends Event = CustomEvent> {
-  (evt: T): void;
-}
-
-export type MuxPlayerRefAttributes = MuxPlayerElement;
-type VideoApiAttributes = {
-  currentTime: number;
-  volume: number;
-  paused: boolean;
-  src: string | null;
-  poster: string;
-  playbackRate: number;
-  playsInline: boolean;
-  preload: string;
-  crossOrigin: string;
-  autoPlay: boolean | string;
-  loop: boolean;
-  muted: boolean;
-  style: CSSProperties;
-};
-
-type MuxMediaPropTypes = {
-  audio: boolean;
-  //  envKey: Options["data"]["env_key"];
-  envKey: string;
-  // debug: Options["debug"] & Hls["config"]["debug"];
-  debug: boolean;
-  disableTracking: boolean;
-  disableCookies: boolean;
-  disablePictureInPicture?: boolean;
-  // metadata: Partial<Options["data"]>;
-  metadata: { [k: string]: any };
-  extraSourceParams: Record<string, any>;
-  _hlsConfig: MuxPlayerElement['_hlsConfig'];
-  beaconCollectionDomain: string;
-  customDomain: string;
-  playbackId: string;
-  preferPlayback: ValueOf<PlaybackTypes> | undefined;
-  // NOTE: Explicitly adding deprecated values here for now to avoid fully breaking changes in TS envs (CJP)
-  streamType: ValueOf<StreamTypes> | 'll-live' | 'live:dvr' | 'll-live:dvr';
-  defaultStreamType: ValueOf<StreamTypes>;
-  targetLiveWindow: number;
-  startTime: number;
-  storyboardSrc: string;
-  preferCmcd: ValueOf<CmcdTypes> | undefined;
-  children?: React.ReactNode;
-};
-
-export type MuxPlayerProps = {
-  className?: string;
-  hotkeys?: string;
-  nohotkeys?: boolean;
-  castReceiver?: string | undefined;
-  castCustomData?: Record<string, any> | undefined;
-  defaultHiddenCaptions?: boolean;
-  playerSoftwareVersion?: string;
-  playerSoftwareName?: string;
-  playerInitTime?: number;
-  forwardSeekOffset?: number;
-  backwardSeekOffset?: number;
-  maxResolution?: MaxResolutionValue;
-  minResolution?: MinResolutionValue;
-  renditionOrder?: RenditionOrderValue;
-  programStartTime?: number;
-  programEndTime?: number;
-  proudlyDisplayMuxBadge?: boolean;
-  assetStartTime?: number;
-  assetEndTime?: number;
-  metadataVideoId?: string;
-  metadataVideoTitle?: string;
-  metadataViewerUserId?: string;
-  primaryColor?: string;
-  secondaryColor?: string;
-  accentColor?: string;
-  placeholder?: string;
-  playbackRates?: number[];
-  defaultShowRemainingTime?: boolean;
-  defaultDuration?: number;
-  noVolumePref?: boolean;
-  thumbnailTime?: number;
-  title?: string;
-  videoTitle?: string;
-  tokens?: Tokens;
-  theme?: string;
-  themeProps?: { [k: string]: any };
-  onAbort?: GenericEventListener<MuxPlayerElementEventMap['abort']>;
-  onCanPlay?: GenericEventListener<MuxPlayerElementEventMap['canplay']>;
-  onCanPlayThrough?: GenericEventListener<MuxPlayerElementEventMap['canplaythrough']>;
-  onEmptied?: GenericEventListener<MuxPlayerElementEventMap['emptied']>;
-  onLoadStart?: GenericEventListener<MuxPlayerElementEventMap['loadstart']>;
-  onLoadedData?: GenericEventListener<MuxPlayerElementEventMap['loadeddata']>;
-  onLoadedMetadata?: GenericEventListener<MuxPlayerElementEventMap['loadedmetadata']>;
-  onProgress?: GenericEventListener<MuxPlayerElementEventMap['progress']>;
-  onDurationChange?: GenericEventListener<MuxPlayerElementEventMap['durationchange']>;
-  onVolumeChange?: GenericEventListener<MuxPlayerElementEventMap['volumechange']>;
-  onRateChange?: GenericEventListener<MuxPlayerElementEventMap['ratechange']>;
-  onResize?: GenericEventListener<MuxPlayerElementEventMap['resize']>;
-  onWaiting?: GenericEventListener<MuxPlayerElementEventMap['waiting']>;
-  onPlay?: GenericEventListener<MuxPlayerElementEventMap['play']>;
-  onPlaying?: GenericEventListener<MuxPlayerElementEventMap['playing']>;
-  onTimeUpdate?: GenericEventListener<MuxPlayerElementEventMap['timeupdate']>;
-  onPause?: GenericEventListener<MuxPlayerElementEventMap['pause']>;
-  onSeeking?: GenericEventListener<MuxPlayerElementEventMap['seeking']>;
-  onSeeked?: GenericEventListener<MuxPlayerElementEventMap['seeked']>;
-  onStalled?: GenericEventListener<MuxPlayerElementEventMap['stalled']>;
-  onSuspend?: GenericEventListener<MuxPlayerElementEventMap['suspend']>;
-  onEnded?: GenericEventListener<MuxPlayerElementEventMap['ended']>;
-  onError?: GenericEventListener<MuxPlayerElementEventMap['error']>;
-  onCuePointChange?: GenericEventListener<MuxPlayerElementEventMap['cuepointchange']>;
-  onCuePointsChange?: GenericEventListener<MuxPlayerElementEventMap['cuepointschange']>;
-  onChapterChange?: GenericEventListener<MuxPlayerElementEventMap['chapterchange']>;
-} & Partial<MuxMediaPropTypes> &
-  Partial<VideoApiAttributes>;
+export * from './types';
 
 const MuxPlayerInternal = React.forwardRef<MuxPlayerRefAttributes, MuxPlayerProps>(({ children, ...props }, ref) => {
   return React.createElement(
@@ -148,22 +26,6 @@ const MuxPlayerInternal = React.forwardRef<MuxPlayerRefAttributes, MuxPlayerProp
   );
 });
 
-const useEventCallbackEffect = <K extends keyof MuxPlayerElementEventMap>(
-  type: K,
-  ref: // | ((instance: EventTarget | null) => void)
-  React.MutableRefObject<MuxPlayerElement | null> | null | undefined,
-  callback: GenericEventListener<MuxPlayerElementEventMap[K]> | undefined
-) => {
-  return useEffect(() => {
-    const eventTarget = ref?.current;
-    if (!eventTarget || !callback) return;
-    eventTarget.addEventListener(type, callback);
-    return () => {
-      eventTarget.removeEventListener(type, callback);
-    };
-  }, [ref?.current, callback]);
-};
-
 const usePlayer = (
   ref: // | ((instance: EventTarget | null) => void)
   React.MutableRefObject<MuxPlayerElement | null> | null | undefined,
@@ -194,7 +56,6 @@ const usePlayer = (
     onEnded,
     onError,
     onCuePointChange,
-    onCuePointsChange,
     onChapterChange,
     metadata,
     tokens,
@@ -239,32 +100,31 @@ const usePlayer = (
     if (currentTimeVal == null) return;
     playerEl.currentTime = currentTimeVal;
   });
-  useEventCallbackEffect('abort', ref, onAbort);
-  useEventCallbackEffect('canplay', ref, onCanPlay);
-  useEventCallbackEffect('canplaythrough', ref, onCanPlayThrough);
-  useEventCallbackEffect('emptied', ref, onEmptied);
-  useEventCallbackEffect('loadstart', ref, onLoadStart);
-  useEventCallbackEffect('loadeddata', ref, onLoadedData);
-  useEventCallbackEffect('loadedmetadata', ref, onLoadedMetadata);
-  useEventCallbackEffect('progress', ref, onProgress);
-  useEventCallbackEffect('durationchange', ref, onDurationChange);
-  useEventCallbackEffect('volumechange', ref, onVolumeChange);
-  useEventCallbackEffect('ratechange', ref, onRateChange);
-  useEventCallbackEffect('resize', ref, onResize);
-  useEventCallbackEffect('waiting', ref, onWaiting);
-  useEventCallbackEffect('play', ref, onPlay);
-  useEventCallbackEffect('playing', ref, onPlaying);
-  useEventCallbackEffect('timeupdate', ref, onTimeUpdate);
-  useEventCallbackEffect('pause', ref, onPause);
-  useEventCallbackEffect('seeking', ref, onSeeking);
-  useEventCallbackEffect('seeked', ref, onSeeked);
-  useEventCallbackEffect('stalled', ref, onStalled);
-  useEventCallbackEffect('suspend', ref, onSuspend);
-  useEventCallbackEffect('ended', ref, onEnded);
-  useEventCallbackEffect('error', ref, onError);
-  useEventCallbackEffect('cuepointchange', ref, onCuePointChange);
-  useEventCallbackEffect('cuepointschange', ref, onCuePointsChange);
-  useEventCallbackEffect('chapterchange', ref, onChapterChange);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('abort', ref, onAbort);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('canplay', ref, onCanPlay);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('canplaythrough', ref, onCanPlayThrough);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('emptied', ref, onEmptied);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('loadstart', ref, onLoadStart);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('loadeddata', ref, onLoadedData);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('loadedmetadata', ref, onLoadedMetadata);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('progress', ref, onProgress);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('durationchange', ref, onDurationChange);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('volumechange', ref, onVolumeChange);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('ratechange', ref, onRateChange);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('resize', ref, onResize);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('waiting', ref, onWaiting);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('play', ref, onPlay);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('playing', ref, onPlaying);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('timeupdate', ref, onTimeUpdate);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('pause', ref, onPause);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('seeking', ref, onSeeking);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('seeked', ref, onSeeked);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('stalled', ref, onStalled);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('suspend', ref, onSuspend);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('ended', ref, onEnded);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('error', ref, onError);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('cuepointchange', ref, onCuePointChange);
+  useEventCallbackEffect<MuxPlayerElement, MuxPlayerElementEventMap>('chapterchange', ref, onChapterChange);
   return [remainingProps];
 };
 
diff --git a/packages/mux-player-react/src/news/README.md b/packages/mux-player-react/src/news/README.md
new file mode 100644
index 000000000..6df0f7fb9
--- /dev/null
+++ b/packages/mux-player-react/src/news/README.md
@@ -0,0 +1,226 @@
+# Integrating Video Ads with MuxNewsPlayer Component
+
+> **Important Note**: This feature is only available in the custom build referenced in this documentation. It is not available in the standard Mux packages from npm.
+
+This documentation covers how to integrate the `MuxNewsPlayer` component provided by the `mux-player-react` package. This integration allows you to display ads within a playlist of Mux videos.
+
+## Table of Contents
+
+1. [Installation](#installation)
+2. [Setting Up Dependencies](#setting-up-dependencies)
+3. [Implementing the MuxNewsPlayer with Ads](#implementing-the-playlist-with-ads)
+4. [Configuration Options](#configuration-options)
+5. [Best Practices](#best-practices)
+6. [Troubleshooting](#troubleshooting)
+
+## Installation
+
+**Note:** The video ads integration with the MuxNewsPlayer component is only available in the custom build referenced below. Standard npm package do not include this functionality.
+
+You must use the specific custom build through gitpkg as shown in the example below:
+
+You can execute
+
+```bash
+  npm install @mux/mux-player-react
+```
+
+or manually add it as a dependency in your package.json
+
+```json
+"dependencies": {
+  "@mux/mux-player-react": "^3.5.0",
+}
+```
+
+## Setting Up Dependencies
+
+### 1. Import the Required Package
+
+In your React component:
+
+```jsx
+import MuxNewsPlayer from "@mux/mux-player-react/news";
+```
+
+### 2. Load the Google IMA SDK
+
+The Google Interactive Media Ads (IMA) SDK is required for ad integration. It should be loaded before rendering the MuxNewsPlayer component:
+
+```jsx
+import { useEffect, useState } from "react";
+
+export default function YourComponent() {
+  const [sdkLoaded, setSdkLoaded] = useState(false);
+
+  useEffect(() => {
+    // Dynamically load the IMA SDK
+    const loadImaSdk = () => {
+      const script = document.createElement("script");
+      script.src = "https://imasdk.googleapis.com/js/sdkloader/ima3.js";
+      script.async = true;
+      script.onload = () => {
+        setSdkLoaded(true);
+        console.log("Google IMA SDK loaded");
+      };
+      script.onerror = () => {
+        setSdkLoaded(true);
+      };
+      document.head.appendChild(script);
+    };
+
+    if (!window.google || !window.google.ima) {
+      loadImaSdk();
+    } else {
+      setSdkLoaded(true);
+    }
+
+    return () => {
+      // Cleanup by removing the script
+      const scriptElement = document.querySelector('script[src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"]');
+      if (scriptElement) {
+        scriptElement.remove();
+      }
+    };
+  }, []);
+
+  // Rest of your component...
+}
+```
+
+## Implementing the MuxNewsPlayer with Ads
+
+### 1. Define Your Video List
+
+Create an array of video objects that includes both video information and ad tag URLs:
+
+```jsx
+const videoList = [
+  {
+    imageUrl: "https://image.mux.com/[PLAYBACK_ID]/thumbnail.jpg",
+    title: "Video Title 1",
+    playbackId: "[PLAYBACK_ID]",
+    adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
+  },
+  // Add more videos as needed
+];
+```
+
+Each video object should contain:
+- `imageUrl`: Thumbnail image URL for the video
+- `title`: Title of the video
+- `playbackId`: Mux playback ID for the video
+- `adTagUrl`: VAST or VMAP URL for the ads to be displayed with this video
+
+### 2. Render the MuxNewsPlayer Component
+
+Only render the MuxNewsPlayer component once the IMA SDK is loaded:
+
+```jsx
+return (
+  <>
+    {sdkLoaded && <MuxNewsPlayer videoList={videoList} />}
+  </>
+);
+```
+
+### 3. Complete Implementation Example
+
+```jsx
+import Head from 'next/head';
+import { useEffect, useState } from "react";
+import MuxNewsPlayer from "@mux/mux-player-react/news";
+
+export default function VideoMuxNewsPlayerPage() {
+  const [sdkLoaded, setSdkLoaded] = useState(false);
+
+  useEffect(() => {
+    // Dynamically load the IMA SDK
+    const loadImaSdk = () => {
+      const script = document.createElement("script");
+      script.src = "https://imasdk.googleapis.com/js/sdkloader/ima3.js";
+      script.async = true;
+      script.onload = () => {
+        setSdkLoaded(true);
+        console.log("Google IMA SDK loaded");
+      };
+      script.onerror = () => {
+        setSdkLoaded(true);
+      };
+      document.head.appendChild(script);
+    };
+
+    if (!window.google || !window.google.ima) {
+      loadImaSdk();
+    } else {
+      setSdkLoaded(true);
+    }
+
+    return () => {
+      // Cleanup by removing the script
+      const scriptElement = document.querySelector('script[src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"]');
+      if (scriptElement) {
+        scriptElement.remove();
+      }
+    };
+  }, []);
+
+  const videoList = [
+    {
+      imageUrl: "https://image.mux.com/DVBhwqkhxkOiLRjUAYJS6mCBJSuC00tB4iWjJmEofJoo/thumbnail.jpg",
+      title: "Test video title 1",
+      playbackId: "DVBhwqkhxkOiLRjUAYJS6mCBJSuC00tB4iWjJmEofJoo",
+      adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
+    },
+    {
+      imageUrl: "https://image.mux.com/VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA/thumbnail.jpg",
+      title: "Test video title 2",
+      playbackId: "VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA",
+      adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpreonly&ciu_szs=300x250%2C728x90&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator=",
+    },
+    {
+      imageUrl: "https://image.mux.com/gZh02tKCI015W6k2XdYSh4srGnksYvsoT1uHsYOlv4Blo/thumbnail.jpg",
+      title: "Test video title 3",
+      playbackId: "gZh02tKCI015W6k2XdYSh4srGnksYvsoT1uHsYOlv4Blo",
+      adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpreonlybumper&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator=",
+    },
+  ];
+
+  return (
+    <>
+      <Head>
+        <title>Video MuxNewsPlayer with Ads</title>
+      </Head>
+
+      {sdkLoaded && <MuxNewsPlayer videoList={videoList} />}
+    </>
+  );
+}
+```
+
+## Configuration Options
+
+### Video Object Properties
+
+Each video in the `videoList` array can have the following properties:
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `playbackId` | String | Mux playback ID for the video | Yes |
+| `adTagUrl` | String | URL for the VAST or VMAP ad tag | Yes for ads |
+| `imageUrl` | String | URL for the video thumbnail | Yes |
+| `title` | String | Title of the video | Yes |
+
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Ads not displaying**:
+   - Ensure the IMA SDK is loaded correctly
+   - Check that ad tag URLs are correctly formatted
+   - Verify that ad blocking software is not active
+
+2. **Console errors about IMA not defined**:
+   - Make sure you're checking if the SDK is loaded before rendering the MuxNewsPlayer
+   - Verify the script is loading successfully in the network tab
diff --git a/packages/mux-player-react/src/news/index.tsx b/packages/mux-player-react/src/news/index.tsx
new file mode 100644
index 000000000..7c1e1ba5f
--- /dev/null
+++ b/packages/mux-player-react/src/news/index.tsx
@@ -0,0 +1,86 @@
+import React, { useRef, useState } from 'react';
+import MuxPlayer, { MuxPlayerProps } from '@mux/mux-player-react/ads';
+import NewsTheme from '@mux/mux-player-react/themes/news';
+import PlaylistEndScreen from './playlist-end-screen';
+
+export interface VideoItem {
+  imageUrl: string;
+  title: string;
+  playbackId: string;
+  adTagUrl: string;
+}
+
+export type PlaylistVideos = VideoItem[];
+
+export interface PlaylistProps extends Omit<MuxPlayerProps, 'playbackId' | 'adTagUrl'> {
+  videoList: PlaylistVideos;
+}
+
+const MuxNewsPlayer = ({ videoList, ...props }: PlaylistProps) => {
+  const mediaElRef = useRef<any>(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isEndScreenVisible, setIsEndScreenVisible] = useState(false);
+  const [playerKey, setPlayerKey] = useState(0);
+
+  function playVideo() {
+    setIsEndScreenVisible(false);
+    setCurrentIndex(currentIndex + 1);
+    setTimeout(() => {
+      try {
+        mediaElRef.current.play();
+      } catch {
+        // Ignore AbortError: The play() request was interrupted by a call to pause()
+      }
+    }, 200);
+  }
+
+  function selectVideo(index: number) {
+    setIsEndScreenVisible(false);
+    setCurrentIndex(index);
+    setTimeout(() => {
+      try {
+        mediaElRef.current.play();
+      } catch {
+        // Ignore AbortError: The play() request was interrupted by a call to pause()
+      }
+    }, 200);
+  }
+
+  return (
+    <MuxPlayer
+      theme={NewsTheme}
+      style={{ aspectRatio: '16/9' }}
+      preferPlayback="mse"
+      maxResolution="2160p"
+      minResolution="540p"
+      renditionOrder="desc"
+      metadata={{
+        video_title: videoList[currentIndex].title,
+      }}
+      {...props}
+      ref={mediaElRef}
+      key={`player-${playerKey}`}
+      playbackId={videoList[currentIndex].playbackId}
+      adTagUrl={videoList[currentIndex].adTagUrl}
+      onEnded={(event) => {
+        if (currentIndex < videoList.length - 1) {
+          setIsEndScreenVisible(true);
+        } else {
+          setCurrentIndex(0);
+          setPlayerKey((prev) => prev + 1);
+        }
+        props.onEnded?.(event);
+      }}
+    >
+      <PlaylistEndScreen
+        video={currentIndex < videoList.length - 1 ? videoList[currentIndex + 1] : videoList[0]}
+        relatedVideos={videoList}
+        isVisible={isEndScreenVisible}
+        selectVideoCallback={selectVideo}
+        timerCallback={playVideo}
+      />
+    </MuxPlayer>
+  );
+};
+
+export default MuxNewsPlayer;
diff --git a/packages/mux-player-react/src/news/playlist-end-screen.css b/packages/mux-player-react/src/news/playlist-end-screen.css
new file mode 100644
index 000000000..680c64aa3
--- /dev/null
+++ b/packages/mux-player-react/src/news/playlist-end-screen.css
@@ -0,0 +1,215 @@
+/* Main Playlist Container */
+.playlist {
+  /* Ensure it wraps on smaller screens */
+  display: inline;
+  position: relative;
+  background-color: #12121263;
+  z-index: 2;
+  top: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+@media (min-width: 1336px) {
+  .playlist {
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: black;
+  opacity: 0.5;
+  z-index: 1;
+}
+
+.post-video-section {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  padding: 1.5rem 2rem;
+  position: relative;
+  gap: 1rem;
+  padding: 1.5rem 2rem;
+  height: max-content;
+  box-sizing: border-box;
+  z-index: 2;
+  max-width: 1200px;
+}
+
+.post-video-section hr {
+  border: none;
+  background: rgba(255, 255, 255, 0.5);
+  height: 100%;
+  width: 1px;
+}
+
+/* Video Section */
+.video-section {
+  flex: 2;
+}
+
+.video-container {
+  position: relative;
+}
+
+.title {
+  font-size: 2.5rem;
+  font-weight: 500;
+  line-height: 3rem;
+  margin: 0;
+  margin-bottom: 1rem;
+}
+
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.video-container > .video-title {
+  font-size: 1.3rem;
+  font-weight: 600;
+}
+
+.video-thumbnail {
+  width: 100%;
+  display: block;
+}
+
+.video-title {
+  font-size: 1rem;
+  margin-top: 0.5rem;
+  cursor: pointer;
+  color: #ffffff;
+  text-decoration: none;
+  line-height: 1.4;
+  /* Adjusted for better readability */
+  word-wrap: break-word;
+  font-weight: 500;
+  margin-bottom: 0;
+}
+
+.video-title:hover {
+  text-decoration: underline;
+}
+
+/* Countdown Timer */
+.countdown-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 3.75rem;
+  height: 3.75rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.countdown-ring {
+  position: absolute;
+}
+
+.circle-background {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.2);
+  stroke-width: 0.25rem;
+}
+
+.circle-progress {
+  fill: none;
+  stroke: #00a3dd;
+  stroke-width: 0.25rem;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 1s linear;
+}
+
+.count-text {
+  position: absolute;
+  font-size: 1rem;
+  font-weight: bold;
+  color: #ffffff;
+}
+
+/* Related Videos */
+.related-videos-section {
+  flex: 1;
+  width: 100%;
+}
+
+.related-title {
+  font-size: 1.125rem;
+  font-weight: bold;
+  margin: 0;
+  line-height: 2rem;
+}
+
+.related-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.related-item {
+  display: flex;
+  align-items: start;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  width: 100%;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  border-radius: 0;
+  background: none;
+}
+
+.related-item:hover {
+  background: none;
+}
+.related-thumbnail {
+  width: 7rem;
+  object-fit: cover;
+  aspect-ratio: 16 / 9;
+}
+
+.related-text {
+  font-size: 0.9rem;
+  color: white;
+  line-height: 1.4;
+  word-wrap: break-word;
+  max-width: 100%;
+  margin-top: 0.25rem;
+  display: block;
+}
+
+.related-text:hover {
+  text-decoration: underline;
+}
+
+/* Responsive  */
+
+@media (max-width: 768px) {
+  .post-video-section {
+    grid-template-columns: 1fr;
+    margin: auto;
+  }
+
+  .post-video-section h2 {
+    display: none;
+  }
+
+  hr {
+    display: none;
+  }
+
+  .video-section {
+    width: 60%;
+    margin: auto;
+  }
+
+  .related-videos-section {
+    display: none;
+  }
+}
diff --git a/packages/mux-player-react/src/news/playlist-end-screen.tsx b/packages/mux-player-react/src/news/playlist-end-screen.tsx
new file mode 100644
index 000000000..516777a93
--- /dev/null
+++ b/packages/mux-player-react/src/news/playlist-end-screen.tsx
@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from 'react';
+import { VideoItem, PlaylistVideos } from '.';
+import style from './playlist-end-screen.css';
+
+interface PlaylistEndScreenProps {
+  video: VideoItem;
+  relatedVideos: PlaylistVideos;
+  isVisible: boolean;
+  selectVideoCallback: (index: number) => void;
+  timerCallback: () => void;
+}
+
+const PlaylistEndScreen = ({
+  video,
+  relatedVideos,
+  isVisible,
+  selectVideoCallback,
+  timerCallback,
+}: PlaylistEndScreenProps) => {
+  const [count, setCount] = useState(3);
+
+  useEffect(() => {
+    if (!isVisible) {
+      setCount(3);
+      return;
+    }
+
+    if (count < 0) {
+      timerCallback();
+      return;
+    }
+    const timer = setInterval(() => {
+      setCount((prev) => Math.max(prev - 1, -1));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [count, isVisible]);
+
+  return (
+    <>
+      <style>{style}</style>
+      <div className="playlist" style={{ display: isVisible ? 'grid' : 'none' }}>
+        <div className="overlay" style={{ display: isVisible ? 'grid' : 'none' }} />
+        <div className="post-video-section" style={{ display: isVisible ? 'grid' : 'none', zIndex: 99 }}>
+          <div className="video-section">
+            <div className="video-container">
+              <h2 className="title">Video</h2>
+              <div className="video-wrapper">
+                <img className="video-thumbnail" src={video.imageUrl} alt={video.title} />
+                <div className="countdown-overlay">
+                  <svg className="countdown-ring" width="50" height="50">
+                    <circle cx="25" cy="25" r="22" className="circle-background" />
+                    <circle
+                      cx="25"
+                      cy="25"
+                      r="22"
+                      className="circle-progress"
+                      style={{
+                        strokeDasharray: '138',
+                        strokeDashoffset: `${(count / 3) * 138}`,
+                      }}
+                    />
+                  </svg>
+                  <span className="count-text">{count}</span>
+                </div>
+              </div>
+              <p className="video-title">{video.title}</p>
+            </div>
+          </div>
+          <hr />
+          <div className="related-videos-section">
+            <h3 className="related-title">Related Videos</h3>
+            <ul className="related-list">
+              {relatedVideos.map((relatedVideo, index) => (
+                <li key={index}>
+                  <button className="related-item" onClick={() => selectVideoCallback(index)}>
+                    <img className="related-thumbnail" src={relatedVideo.imageUrl} alt={relatedVideo.title} />
+                    <p className="related-text">{relatedVideo.title}</p>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PlaylistEndScreen;
diff --git a/packages/mux-player-react/src/themes/news.ts b/packages/mux-player-react/src/themes/news.ts
new file mode 100644
index 000000000..af64d43b4
--- /dev/null
+++ b/packages/mux-player-react/src/themes/news.ts
@@ -0,0 +1,3 @@
+'use client';
+import '@mux/mux-player/themes/news';
+export default 'news';
diff --git a/packages/mux-player-react/src/types.ts b/packages/mux-player-react/src/types.ts
new file mode 100644
index 000000000..6766ca268
--- /dev/null
+++ b/packages/mux-player-react/src/types.ts
@@ -0,0 +1,131 @@
+import type { CSSProperties } from 'react';
+import type {
+  StreamTypes,
+  PlaybackTypes,
+  CmcdTypes,
+  MaxResolutionValue,
+  MinResolutionValue,
+  RenditionOrderValue,
+} from '@mux/playback-core';
+import type MuxPlayerElement from '@mux/mux-player';
+import type { Tokens, EventMap as MuxPlayerElementEventMap } from '@mux/mux-player';
+
+type ValueOf<T> = T[keyof T];
+
+export interface GenericEventListener<T extends Event = CustomEvent> {
+  (evt: T): void;
+}
+
+export type MuxPlayerRefAttributes = MuxPlayerElement;
+type VideoApiAttributes = {
+  currentTime: number;
+  volume: number;
+  paused: boolean;
+  src: string | null;
+  poster: string;
+  playbackRate: number;
+  playsInline: boolean;
+  preload: string;
+  crossOrigin: string;
+  autoPlay: boolean | string;
+  loop: boolean;
+  muted: boolean;
+  style: CSSProperties;
+};
+
+type MuxMediaPropTypes = {
+  audio: boolean;
+  //  envKey: Options["data"]["env_key"];
+  envKey: string;
+  // debug: Options["debug"] & Hls["config"]["debug"];
+  debug: boolean;
+  disableTracking: boolean;
+  disableCookies: boolean;
+  disablePictureInPicture?: boolean;
+  // metadata: Partial<Options["data"]>;
+  metadata: { [k: string]: any };
+  extraSourceParams: Record<string, any>;
+  _hlsConfig: MuxPlayerElement['_hlsConfig'];
+  beaconCollectionDomain: string;
+  customDomain: string;
+  playbackId: string;
+  preferPlayback: ValueOf<PlaybackTypes> | undefined;
+  // NOTE: Explicitly adding deprecated values here for now to avoid fully breaking changes in TS envs (CJP)
+  streamType: ValueOf<StreamTypes> | 'll-live' | 'live:dvr' | 'll-live:dvr';
+  defaultStreamType: ValueOf<StreamTypes>;
+  targetLiveWindow: number;
+  startTime: number;
+  storyboardSrc: string;
+  preferCmcd: ValueOf<CmcdTypes> | undefined;
+  children?: React.ReactNode;
+};
+
+export type Props = MuxPlayerProps;
+
+export type MuxPlayerProps = {
+  className?: string;
+  hotkeys?: string;
+  nohotkeys?: boolean;
+  castReceiver?: string | undefined;
+  castCustomData?: Record<string, any> | undefined;
+  defaultHiddenCaptions?: boolean;
+  playerSoftwareVersion?: string;
+  playerSoftwareName?: string;
+  playerInitTime?: number;
+  forwardSeekOffset?: number;
+  backwardSeekOffset?: number;
+  maxResolution?: MaxResolutionValue;
+  minResolution?: MinResolutionValue;
+  renditionOrder?: RenditionOrderValue;
+  programStartTime?: number;
+  programEndTime?: number;
+  proudlyDisplayMuxBadge?: boolean;
+  /** Allow playback with ad blocker */
+  allowAdBlocker?: boolean;
+  adTagUrl?: string;
+  assetStartTime?: number;
+  assetEndTime?: number;
+  metadataVideoId?: string;
+  metadataVideoTitle?: string;
+  metadataViewerUserId?: string;
+  primaryColor?: string;
+  secondaryColor?: string;
+  accentColor?: string;
+  placeholder?: string;
+  playbackRates?: number[];
+  defaultShowRemainingTime?: boolean;
+  defaultDuration?: number;
+  noVolumePref?: boolean;
+  thumbnailTime?: number;
+  title?: string;
+  videoTitle?: string;
+  tokens?: Tokens;
+  theme?: string;
+  themeProps?: { [k: string]: any };
+  onAbort?: GenericEventListener<MuxPlayerElementEventMap['abort']>;
+  onCanPlay?: GenericEventListener<MuxPlayerElementEventMap['canplay']>;
+  onCanPlayThrough?: GenericEventListener<MuxPlayerElementEventMap['canplaythrough']>;
+  onEmptied?: GenericEventListener<MuxPlayerElementEventMap['emptied']>;
+  onLoadStart?: GenericEventListener<MuxPlayerElementEventMap['loadstart']>;
+  onLoadedData?: GenericEventListener<MuxPlayerElementEventMap['loadeddata']>;
+  onLoadedMetadata?: GenericEventListener<MuxPlayerElementEventMap['loadedmetadata']>;
+  onProgress?: GenericEventListener<MuxPlayerElementEventMap['progress']>;
+  onDurationChange?: GenericEventListener<MuxPlayerElementEventMap['durationchange']>;
+  onVolumeChange?: GenericEventListener<MuxPlayerElementEventMap['volumechange']>;
+  onRateChange?: GenericEventListener<MuxPlayerElementEventMap['ratechange']>;
+  onResize?: GenericEventListener<MuxPlayerElementEventMap['resize']>;
+  onWaiting?: GenericEventListener<MuxPlayerElementEventMap['waiting']>;
+  onPlay?: GenericEventListener<MuxPlayerElementEventMap['play']>;
+  onPlaying?: GenericEventListener<MuxPlayerElementEventMap['playing']>;
+  onTimeUpdate?: GenericEventListener<MuxPlayerElementEventMap['timeupdate']>;
+  onPause?: GenericEventListener<MuxPlayerElementEventMap['pause']>;
+  onSeeking?: GenericEventListener<MuxPlayerElementEventMap['seeking']>;
+  onSeeked?: GenericEventListener<MuxPlayerElementEventMap['seeked']>;
+  onStalled?: GenericEventListener<MuxPlayerElementEventMap['stalled']>;
+  onSuspend?: GenericEventListener<MuxPlayerElementEventMap['suspend']>;
+  onEnded?: GenericEventListener<MuxPlayerElementEventMap['ended']>;
+  onError?: GenericEventListener<MuxPlayerElementEventMap['error']>;
+  onCuePointChange?: GenericEventListener<MuxPlayerElementEventMap['cuepointchange']>;
+  onChapterChange?: GenericEventListener<MuxPlayerElementEventMap['chapterchange']>;
+} & Partial<MuxMediaPropTypes> &
+  Partial<VideoApiAttributes>;
diff --git a/packages/mux-player-react/src/useEventCallbackEffect.ts b/packages/mux-player-react/src/useEventCallbackEffect.ts
new file mode 100644
index 000000000..129d2b57e
--- /dev/null
+++ b/packages/mux-player-react/src/useEventCallbackEffect.ts
@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import type { GenericEventListener } from './index';
+
+export const useEventCallbackEffect = <
+  TElement extends EventTarget = EventTarget,
+  TEventMap extends Record<string, Event> = Record<string, Event>,
+  K extends keyof TEventMap = keyof TEventMap,
+>(
+  type: K,
+  ref: // | ((instance: EventTarget | null) => void)
+  React.MutableRefObject<TElement | null> | null | undefined,
+  callback: GenericEventListener<TEventMap[K]> | undefined
+) => {
+  return useEffect(() => {
+    const eventTarget = ref?.current;
+    if (!eventTarget || !callback) return;
+
+    // Type assertion needed because TypeScript can't infer the exact event type
+    const eventName = type as string;
+    const listener = callback as EventListener;
+
+    eventTarget.addEventListener(eventName, listener);
+    return () => {
+      eventTarget.removeEventListener(eventName, listener);
+    };
+  }, [ref?.current, callback, type]);
+};
diff --git a/packages/mux-player-react/types/index.d.ts b/packages/mux-player-react/types/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/mux-player/package.json b/packages/mux-player/package.json
index d78620ed3..cb3b0adc6 100644
--- a/packages/mux-player/package.json
+++ b/packages/mux-player/package.json
@@ -19,11 +19,29 @@
     "<4.3.5": {
       ".": [
         "./dist/types-ts3.4/index.d.ts"
+      ],
+      "base": [
+        "./dist/types-ts3.4/base.d.ts"
+      ],
+      "ads": [
+        "./dist/types-ts3.4/ads/index.d.ts"
+      ],
+      "ads/mixin": [
+        "./dist/types-ts3.4/ads/mixin/index.d.ts"
       ]
     },
     "*": {
       ".": [
         "./dist/types/index.d.ts"
+      ],
+      "base": [
+        "./dist/types/base.d.ts"
+      ],
+      "ads": [
+        "./dist/types/ads/index.d.ts"
+      ],
+      "ads/mixin": [
+        "./dist/types/ads/mixin/index.d.ts"
       ]
     }
   },
@@ -35,29 +53,37 @@
       "require": "./dist/index.cjs.js",
       "default": "./dist/index.cjs.js"
     },
-    "./themes/microvideo": {
-      "browser": "./dist/themes/microvideo/index.mjs",
-      "import": "./dist/themes/microvideo/index.mjs",
-      "require": "./dist/themes/microvideo/index.cjs.js",
-      "default": "./dist/themes/microvideo/index.cjs.js"
+    "./ads": {
+      "types@<4.3.5": "./dist/types-ts3.4/ads/index.d.ts",
+      "types": "./dist/types/ads/index.d.ts",
+      "import": "./dist/ads/index.mjs",
+      "require": "./dist/ads/index.cjs.js",
+      "default": "./dist/ads/index.cjs.js"
     },
-    "./themes/minimal": {
-      "browser": "./dist/themes/minimal/index.mjs",
-      "import": "./dist/themes/minimal/index.mjs",
-      "require": "./dist/themes/minimal/index.cjs.js",
-      "default": "./dist/themes/minimal/index.cjs.js"
+    "./ads/mixin": {
+      "types@<4.3.5": "./dist/types-ts3.4/ads/mixin/index.d.ts",
+      "types": "./dist/types/ads/mixin/index.d.ts",
+      "import": "./dist/ads/mixin/index.mjs",
+      "require": "./dist/ads/mixin/index.cjs.js",
+      "default": "./dist/ads/mixin/index.cjs.js"
     },
-    "./themes/classic": {
-      "browser": "./dist/themes/classic/index.mjs",
-      "import": "./dist/themes/classic/index.mjs",
-      "require": "./dist/themes/classic/index.cjs.js",
-      "default": "./dist/themes/classic/index.cjs.js"
+    "./themes/*": {
+      "browser": "./dist/themes/*/index.mjs",
+      "import": "./dist/themes/*/index.mjs",
+      "require": "./dist/themes/*/index.cjs.js",
+      "default": "./dist/themes/*/index.cjs.js"
     },
-    "./themes/gerwig": {
-      "browser": "./dist/themes/gerwig/index.mjs",
-      "import": "./dist/themes/gerwig/index.mjs",
-      "require": "./dist/themes/gerwig/index.cjs.js",
-      "default": "./dist/themes/gerwig/index.cjs.js"
+    "./*.js": {
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs.js",
+      "default": "./dist/*.js"
+    },
+    "./*": {
+      "types@<4.3.5": "./dist/types-ts3.4/*.d.ts",
+      "types": "./dist/types/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.cjs.js",
+      "default": "./dist/*.mjs"
     }
   },
   "types": "./dist/types/index.d.ts",
@@ -75,28 +101,34 @@
     "test": "web-test-runner **/*test.js --port 8001 --coverage --config test/web-test-runner.config.mjs --root-dir ../..",
     "posttest": "replace 'SF:src/' 'SF:packages/mux-player/src/' coverage/lcov.info --silent",
     "i18n": "npm run build:esm -- --keep-names && i18n-utils dist/index.mjs ./lang",
-    "dev:iife": "npm run build:iife -- --watch=forever",
-    "dev:esm": "npm run build:esm -- --watch=forever",
-    "dev:esm-module": "npm run build:esm-module -- --watch=forever",
-    "dev:cjs": "npm run build:cjs -- --watch=forever",
+    "dev:iife": "npm-run-all --parallel 'build:iife:** -- --watch=forever'",
+    "dev:esm": "npm-run-all --parallel 'build:esm:** -- --watch=forever'",
+    "dev:esm-module": "npm-run-all --parallel 'build:esm-module:** -- --watch=forever'",
+    "dev:cjs": "npm-run-all --parallel 'build:cjs:** -- --watch=forever'",
     "dev:types": "npm run build:types -- -w",
     "dev:themes": "node ./scripts/build-themes.mjs --dev",
     "dev": "npm-run-all --parallel dev:types dev:esm dev:cjs dev:esm-module dev:iife dev:themes",
-    "build:esm": "esbuilder src/index.ts --format=esm --out-extension:.js=.mjs",
-    "build:esm-module": "esbuilder src/index.ts --format=esm-module --outfile=dist/mux-player.mjs",
-    "build:iife": "esbuilder src/index.ts --format=iife --outfile=dist/mux-player.js",
-    "build:cjs": "esbuilder src/index.ts --format=cjs --out-extension:.js=.cjs.js",
+    "build:esm:index": "esbuilder src/index.ts --format=esm --out-extension:.js=.mjs",
+    "build:esm-module:index": "esbuilder src/index.ts --format=esm-module --outfile=dist/mux-player.mjs",
+    "build:iife:index": "esbuilder src/index.ts --format=iife --outfile=dist/mux-player.js",
+    "build:cjs:index": "esbuilder src/index.ts --format=cjs --out-extension:.js=.cjs.js",
+    "build:esm:base": "esbuilder src/base.ts --format=esm --outdir=dist --out-extension:.js=.mjs",
+    "build:cjs:base": "esbuilder src/base.ts --format=cjs --outdir=dist --out-extension:.js=.cjs.js",
+    "build:esm:ads": "esbuilder src/ads/index.ts --format=esm --outdir=dist/ads --out-extension:.js=.mjs",
+    "build:cjs:ads": "esbuilder src/ads/index.ts --format=cjs --outdir=dist/ads --out-extension:.js=.cjs.js",
+    "build:esm:ads:mixin": "esbuilder src/ads/mixin/index.ts --format=esm --outdir=dist/ads/mixin --out-extension:.js=.mjs",
+    "build:cjs:ads:mixin": "esbuilder src/ads/mixin/index.ts --format=cjs --outdir=dist/ads/mixin --out-extension:.js=.cjs.js",
     "build:themes": "node ./scripts/build-themes.mjs",
     "copypolyfills": "shx mkdir -p src/polyfills && shx cp ../../shared/polyfills/index.ts ./src/polyfills/index.ts",
     "build:types": "tsc",
     "postbuild:types": "downlevel-dts ./dist/types ./dist/types-ts3.4",
-    "build": "npm-run-all --parallel 'build:esm -- --minify' 'build:iife -- --minify' 'build:cjs -- --minify' 'build:esm-module -- --minify' 'build:themes'"
+    "build": "npm-run-all 'build:esm:base -- --minify' 'build:cjs:base -- --minify' 'build:esm:ads:mixin -- --minify' 'build:cjs:ads:mixin -- --minify' --parallel 'build:esm:** -- --minify' 'build:iife:** -- --minify' 'build:cjs:** -- --minify' 'build:esm-module:** -- --minify' 'build:themes'"
   },
   "dependencies": {
     "@mux/mux-video": "0.25.3",
     "@mux/playback-core": "0.29.1",
     "media-chrome": "~4.11.1",
-    "player.style": "^0.1.8"
+    "player.style": "^0.1.9"
   },
   "devDependencies": {
     "@mux/esbuilder": "0.1.0",
diff --git a/packages/mux-player/scripts/build-themes.mjs b/packages/mux-player/scripts/build-themes.mjs
index bb0f98ee9..f15520403 100644
--- a/packages/mux-player/scripts/build-themes.mjs
+++ b/packages/mux-player/scripts/build-themes.mjs
@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import esbuild from 'esbuild';
 
-const themes = ['classic', 'microvideo', 'minimal', 'gerwig'];
+const themes = ['classic', 'microvideo', 'minimal', 'gerwig', 'news'];
 const devMode = process.argv.includes('--dev');
 
 const shared = {
diff --git a/packages/mux-player/src/ads/index.ts b/packages/mux-player/src/ads/index.ts
new file mode 100644
index 000000000..23199dddc
--- /dev/null
+++ b/packages/mux-player/src/ads/index.ts
@@ -0,0 +1,19 @@
+import { globalThis } from '../polyfills';
+// Register <mux-video> (ads) web component.
+import '@mux/mux-video/ads';
+import MuxPlayerBaseElement from '@mux/mux-player/base';
+import { AdsPlayerMixin } from '@mux/mux-player/ads/mixin';
+import type { EventMap as MuxVideoAdsEventMap } from '@mux/mux-video/ads';
+
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+export type EventMap = Expand<MuxVideoAdsEventMap>;
+
+class MuxPlayerElement extends AdsPlayerMixin(MuxPlayerBaseElement) {}
+
+if (!globalThis.customElements.get('mux-player')) {
+  globalThis.customElements.define('mux-player', MuxPlayerElement);
+  (globalThis as any).MuxPlayerElement = MuxPlayerElement;
+}
+
+export * from '@mux/mux-player/base';
+export default MuxPlayerElement;
diff --git a/packages/mux-player/src/ads/mixin/index.ts b/packages/mux-player/src/ads/mixin/index.ts
new file mode 100644
index 000000000..264847c72
--- /dev/null
+++ b/packages/mux-player/src/ads/mixin/index.ts
@@ -0,0 +1,78 @@
+import { MuxPlayerElementConstructor, Constructor, IAdsPlayer } from './types.js';
+
+export const Attributes = {
+  AD_TAG_URL: 'ad-tag-url',
+  ALLOW_AD_BLOCKER: 'allow-ad-blocker',
+} as const;
+
+export function AdsPlayerMixin<T extends MuxPlayerElementConstructor>(superclass: T): Constructor<IAdsPlayer> & T {
+  class AdsPlayer extends superclass implements IAdsPlayer {
+    static get observedAttributes() {
+      return [...super.observedAttributes, ...Object.values(Attributes)];
+    }
+
+    #tracks: HTMLTrackElement[] = [];
+
+    connectedCallback() {
+      super.connectedCallback();
+
+      if (this.media) {
+        this.media.allowAdBlocker = this.allowAdBlocker;
+        this.media.adTagUrl = this.adTagUrl;
+      }
+
+      this.addEventListener('adbreakstart', () => {
+        this.mediaTheme?.toggleAttribute('mediaadbreak', true);
+
+        // Remove any tracks during ad-break to prevent cues from showing
+        // but also to fix a bug on iOS where the video would not start.
+        this.#tracks = Array.from(this.media?.querySelectorAll('track') || []);
+        this.#tracks.forEach((track) => track.remove());
+      });
+
+      this.addEventListener('adbreakend', () => {
+        this.mediaTheme?.toggleAttribute('mediaadbreak', false);
+        this.media?.append(...this.#tracks);
+      });
+    }
+
+    attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string) {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+
+      if (!this.media) return;
+
+      switch (attrName) {
+        case Attributes.ALLOW_AD_BLOCKER:
+          this.media.allowAdBlocker = this.allowAdBlocker;
+          break;
+        case Attributes.AD_TAG_URL:
+          this.media.adTagUrl = this.adTagUrl;
+          break;
+      }
+    }
+
+    get allowAdBlocker() {
+      return this.hasAttribute(Attributes.ALLOW_AD_BLOCKER);
+    }
+
+    set allowAdBlocker(val: boolean) {
+      if (val === this.allowAdBlocker) return;
+      this.toggleAttribute(Attributes.ALLOW_AD_BLOCKER, Boolean(val));
+    }
+
+    get adTagUrl() {
+      return this.getAttribute(Attributes.AD_TAG_URL) ?? undefined;
+    }
+
+    set adTagUrl(val: string | undefined) {
+      if (val === this.adTagUrl) return;
+      if (val) {
+        this.setAttribute(Attributes.AD_TAG_URL, val);
+      } else {
+        this.removeAttribute(Attributes.AD_TAG_URL);
+      }
+    }
+  }
+
+  return AdsPlayer as unknown as Constructor<IAdsPlayer> & T;
+}
diff --git a/packages/mux-player/src/ads/mixin/types.ts b/packages/mux-player/src/ads/mixin/types.ts
new file mode 100644
index 000000000..ac0dbb207
--- /dev/null
+++ b/packages/mux-player/src/ads/mixin/types.ts
@@ -0,0 +1,32 @@
+import type MuxPlayerElement from '@mux/mux-player/base';
+import type { EventMap as MuxVideoAdsEventMap } from '@mux/mux-video/ads';
+
+export type MuxPlayerElementConstructor = Constructor<MuxPlayerElement> & {
+  observedAttributes: string[];
+};
+
+export type Constructor<T> = new (...args: any[]) => T;
+
+export interface IAdsPlayer {
+  /**
+   * Allow playback with ad blocker.
+   */
+  allowAdBlocker: boolean;
+
+  /**
+   * The URL of the ad tag to be requested.
+   */
+  adTagUrl: string | undefined;
+
+  addEventListener<K extends keyof MuxVideoAdsEventMap>(
+    type: K,
+    listener: (this: HTMLMediaElement, ev: MuxVideoAdsEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof MuxVideoAdsEventMap>(
+    type: K,
+    listener: (this: HTMLMediaElement, ev: MuxVideoAdsEventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
diff --git a/packages/mux-player/src/base.ts b/packages/mux-player/src/base.ts
new file mode 100644
index 000000000..2e9e379c6
--- /dev/null
+++ b/packages/mux-player/src/base.ts
@@ -0,0 +1,1844 @@
+import { globalThis, document } from './polyfills';
+import { MediaController, MediaErrorDialog } from 'media-chrome';
+import { Attributes as MediaControllerAttributes } from 'media-chrome/dist/media-container.js';
+import { MediaStateChangeEvents, MediaUIAttributes, MediaUIEvents } from 'media-chrome/dist/constants.js';
+import 'media-chrome/dist/experimental/index.js';
+import { MediaThemeElement } from 'media-chrome/dist/media-theme-element.js';
+import { MediaError, Attributes as MuxVideoAttributes } from '@mux/mux-video/base';
+import {
+  StreamTypes,
+  PlaybackTypes,
+  addTextTrack,
+  removeTextTrack,
+  CmcdTypes,
+  CmcdTypeValues,
+  i18n,
+  parseJwt,
+  MuxJWTAud,
+  generatePlayerInitTime,
+} from '@mux/playback-core';
+import type {
+  ValueOf,
+  Metadata,
+  PlaybackEngine,
+  MaxResolutionValue,
+  MinResolutionValue,
+  RenditionOrderValue,
+  Chapter,
+  CuePoint,
+  Tokens,
+} from '@mux/playback-core';
+import VideoApiElement from './video-api';
+import {
+  getPlayerVersion,
+  toPropName,
+  AttributeTokenList,
+  getPosterURLFromPlaybackId,
+  getStoryboardURLFromPlaybackId,
+  getStreamTypeFromAttr,
+} from './helpers';
+import { template } from './template';
+import { render } from './html';
+import { muxMediaErrorToDialog, muxMediaErrorToDevlog } from './errors';
+import { toNumberOrUndefined, containsComposedNode, camelCase, kebabCase } from './utils';
+import * as logger from './logger';
+import type { MuxTemplateProps, ErrorEvent, IMuxPlayerElement } from './types';
+import './themes/gerwig';
+import { HlsConfig } from 'hls.js';
+
+export type { EventMap, MuxPlayerElementEventMap } from './types';
+export type { Tokens };
+export { MediaError, generatePlayerInitTime };
+
+const DefaultThemeName = 'gerwig';
+
+const VideoAttributes = {
+  SRC: 'src',
+  POSTER: 'poster',
+} as const;
+
+const PlayerAttributes = {
+  STYLE: 'style',
+  DEFAULT_HIDDEN_CAPTIONS: 'default-hidden-captions',
+  PRIMARY_COLOR: 'primary-color',
+  SECONDARY_COLOR: 'secondary-color',
+  ACCENT_COLOR: 'accent-color',
+  FORWARD_SEEK_OFFSET: 'forward-seek-offset',
+  BACKWARD_SEEK_OFFSET: 'backward-seek-offset',
+  PLAYBACK_TOKEN: 'playback-token',
+  THUMBNAIL_TOKEN: 'thumbnail-token',
+  STORYBOARD_TOKEN: 'storyboard-token',
+  DRM_TOKEN: 'drm-token',
+  STORYBOARD_SRC: 'storyboard-src',
+  THUMBNAIL_TIME: 'thumbnail-time',
+  AUDIO: 'audio',
+  NOHOTKEYS: 'nohotkeys',
+  HOTKEYS: 'hotkeys',
+  PLAYBACK_RATES: 'playbackrates',
+  DEFAULT_SHOW_REMAINING_TIME: 'default-show-remaining-time',
+  DEFAULT_DURATION: 'default-duration',
+  TITLE: 'title',
+  VIDEO_TITLE: 'video-title', // video-title is an alternative for title which doesn't cause a tooltip.
+  PLACEHOLDER: 'placeholder',
+  THEME: 'theme',
+  DEFAULT_STREAM_TYPE: 'default-stream-type',
+  TARGET_LIVE_WINDOW: 'target-live-window',
+  EXTRA_SOURCE_PARAMS: 'extra-source-params',
+  NO_VOLUME_PREF: 'no-volume-pref',
+  CAST_RECEIVER: 'cast-receiver',
+  NO_TOOLTIPS: 'no-tooltips',
+  PROUDLY_DISPLAY_MUX_BADGE: 'proudly-display-mux-badge',
+} as const;
+
+const ThemeAttributeNames = [
+  'audio',
+  'backwardseekoffset',
+  'defaultduration',
+  'defaultshowremainingtime',
+  'defaultsubtitles',
+  'noautoseektolive',
+  'disabled',
+  'exportparts',
+  'forwardseekoffset',
+  'hideduration',
+  'hotkeys',
+  'nohotkeys',
+  'playbackrates',
+  'defaultstreamtype',
+  'streamtype',
+  'style',
+  'targetlivewindow',
+  'template',
+  'title',
+  'videotitle',
+  'novolumepref',
+  'proudlydisplaymuxbadge',
+];
+
+function getProps(el: MuxPlayerElement, state?: any): MuxTemplateProps {
+  const props = {
+    // Give priority to playbackId derrived asset URL's if playbackId is set.
+    src: !el.playbackId && el.src,
+    playbackId: el.playbackId,
+    hasSrc: !!el.playbackId || !!el.src || !!el.currentSrc,
+    poster: el.poster,
+    storyboard: el.storyboard,
+    storyboardSrc: el.getAttribute(PlayerAttributes.STORYBOARD_SRC),
+    placeholder: el.getAttribute('placeholder'),
+    themeTemplate: getThemeTemplate(el),
+    thumbnailTime: !el.tokens.thumbnail && el.thumbnailTime,
+    autoplay: el.autoplay,
+    crossOrigin: el.crossOrigin,
+    loop: el.loop,
+    // NOTE: Renaming internal prop due to state (sometimes derived from attributeChangedCallback attr values)
+    // overwriting prop value (type mismatch: string vs. boolean) (CJP)
+    noHotKeys: el.hasAttribute(PlayerAttributes.NOHOTKEYS),
+    hotKeys: el.getAttribute(PlayerAttributes.HOTKEYS),
+    muted: el.muted,
+    paused: el.paused,
+    // NOTE: Currently unsupported due to "default true attribute" problem
+    // playsInline: el.playsInline,
+    preload: el.preload,
+    envKey: el.envKey,
+    preferCmcd: el.preferCmcd,
+    debug: el.debug,
+    disableTracking: el.disableTracking,
+    disableCookies: el.disableCookies,
+    tokens: el.tokens,
+    beaconCollectionDomain: el.beaconCollectionDomain,
+    maxResolution: el.maxResolution,
+    minResolution: el.minResolution,
+    programStartTime: el.programStartTime,
+    programEndTime: el.programEndTime,
+    assetStartTime: el.assetStartTime,
+    assetEndTime: el.assetEndTime,
+    renditionOrder: el.renditionOrder,
+    metadata: el.metadata,
+    playerInitTime: el.playerInitTime,
+    playerSoftwareName: el.playerSoftwareName,
+    playerSoftwareVersion: el.playerSoftwareVersion,
+    startTime: el.startTime,
+    preferPlayback: el.preferPlayback,
+    audio: el.audio,
+    defaultStreamType: el.defaultStreamType,
+    targetLiveWindow: el.getAttribute(MuxVideoAttributes.TARGET_LIVE_WINDOW),
+    streamType: getStreamTypeFromAttr(el.getAttribute(MuxVideoAttributes.STREAM_TYPE)),
+    primaryColor: el.getAttribute(PlayerAttributes.PRIMARY_COLOR),
+    secondaryColor: el.getAttribute(PlayerAttributes.SECONDARY_COLOR),
+    accentColor: el.getAttribute(PlayerAttributes.ACCENT_COLOR),
+    forwardSeekOffset: el.forwardSeekOffset,
+    backwardSeekOffset: el.backwardSeekOffset,
+    defaultHiddenCaptions: el.defaultHiddenCaptions,
+    defaultDuration: el.defaultDuration,
+    defaultShowRemainingTime: el.defaultShowRemainingTime,
+    hideDuration: getHideDuration(el),
+    playbackRates: el.getAttribute(PlayerAttributes.PLAYBACK_RATES),
+    customDomain: el.getAttribute(MuxVideoAttributes.CUSTOM_DOMAIN) ?? undefined,
+    title: el.getAttribute(PlayerAttributes.TITLE),
+    videoTitle: el.getAttribute(PlayerAttributes.VIDEO_TITLE) ?? el.getAttribute(PlayerAttributes.TITLE),
+    novolumepref: el.hasAttribute(PlayerAttributes.NO_VOLUME_PREF),
+    proudlyDisplayMuxBadge: el.hasAttribute(PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE),
+    castReceiver: el.castReceiver,
+    ...state,
+    // NOTE: since the attribute value is used as the "source of truth" for the property getter,
+    // moving this below the `...state` spread so it resolves to the default value when unset (CJP)
+    extraSourceParams: el.extraSourceParams,
+  };
+
+  return props;
+}
+
+const baseFormatErrorMessage = MediaErrorDialog.formatErrorMessage;
+MediaErrorDialog.formatErrorMessage = (error: { code: number; message: string }) => {
+  if (error instanceof MediaError) {
+    const dialog = muxMediaErrorToDialog(error, false);
+    return `
+      ${dialog?.title ? `<h3>${dialog.title}</h3>` : ''}
+      ${
+        dialog?.message || dialog?.linkUrl
+          ? `<p>
+        ${dialog?.message}
+        ${
+          dialog?.linkUrl
+            ? `<a
+              href="${dialog.linkUrl}"
+              target="_blank"
+              rel="external noopener"
+              aria-label="${dialog.linkText ?? ''} ${i18n(`(opens in a new window)`)}"
+              >${dialog.linkText ?? dialog.linkUrl}</a
+            >`
+            : ''
+        }
+      </p>`
+          : ''
+      }
+    `;
+  }
+  return baseFormatErrorMessage(error);
+};
+
+function getThemeTemplate(el: MuxPlayerElement) {
+  let themeName = el.theme;
+
+  if (themeName) {
+    const templateElement = (el.getRootNode() as ShadowRoot | Document | null)?.getElementById?.(themeName);
+    // NOTE: Since folks may unknowingly use matching ids for elements other than their theme
+    // (intending to use path two for template identification, below), make sure the matching
+    // element is, in fact, an HTMLTemplateElement (CJP)
+    if (templateElement && templateElement instanceof HTMLTemplateElement) return templateElement;
+
+    if (!themeName.startsWith('media-theme-')) {
+      themeName = `media-theme-${themeName}`;
+    }
+
+    const ThemeElement = globalThis.customElements.get(themeName) as MediaThemeElement | undefined;
+    if (ThemeElement?.template) return ThemeElement.template;
+  }
+}
+
+function getHideDuration(el: MuxPlayerElement) {
+  const timeDisplay = el.mediaController?.querySelector('media-time-display');
+  return (
+    timeDisplay &&
+    getComputedStyle(timeDisplay as unknown as HTMLElement)
+      .getPropertyValue('--media-duration-display-display')
+      .trim() === 'none'
+  );
+}
+
+function getMetadataFromAttrs(el: MuxPlayerElement) {
+  // Adding title defaulting, when present, as a seed value here to ensure it's
+  // overridden by metadata-video-title if it is also present. (CJP)
+  const seedValue: { [key: string]: string } = !!el.videoTitle ? { video_title: el.videoTitle } : {};
+  return el
+    .getAttributeNames()
+    .filter((attrName) => attrName.startsWith('metadata-'))
+    .reduce((currAttrs, attrName) => {
+      const value = el.getAttribute(attrName);
+      if (value !== null) {
+        currAttrs[attrName.replace(/^metadata-/, '').replace(/-/g, '_')] = value;
+      }
+      return currAttrs;
+    }, seedValue);
+}
+
+const MuxVideoAttributeNames = Object.values(MuxVideoAttributes);
+const VideoAttributeNames = Object.values(VideoAttributes);
+const PlayerAttributeNames = Object.values(PlayerAttributes);
+
+export const playerSoftwareVersion = getPlayerVersion();
+export const playerSoftwareName = 'mux-player';
+
+const initialState = {
+  isDialogOpen: false,
+};
+
+const DEFAULT_EXTRA_PLAYLIST_PARAMS = { redundant_streams: true };
+
+class MuxPlayerElement extends VideoApiElement implements IMuxPlayerElement {
+  #defaultPlayerInitTime: number;
+  #isInit = false;
+  #tokens: Tokens = {};
+  #userInactive = true;
+  #hotkeys = new AttributeTokenList(this, 'hotkeys');
+  #state: Partial<MuxTemplateProps> = {
+    ...initialState,
+    onCloseErrorDialog: (event) => {
+      const localName = (event.composedPath()[0] as HTMLElement)?.localName;
+      if (localName !== 'media-error-dialog') return;
+
+      this.#setState({ isDialogOpen: false });
+    },
+    onFocusInErrorDialog: (event) => {
+      const localName = (event.composedPath()[0] as HTMLElement)?.localName;
+      if (localName !== 'media-error-dialog') return;
+
+      const isFocusedElementInPlayer = containsComposedNode(this, document.activeElement);
+      if (!isFocusedElementInPlayer) event.preventDefault();
+    },
+  };
+
+  static get NAME() {
+    return playerSoftwareName;
+  }
+
+  static get VERSION() {
+    return playerSoftwareVersion;
+  }
+
+  static get observedAttributes() {
+    return [
+      ...(VideoApiElement.observedAttributes ?? []),
+      ...VideoAttributeNames,
+      ...MuxVideoAttributeNames,
+      ...PlayerAttributeNames,
+    ];
+  }
+
+  constructor() {
+    super();
+    this.#defaultPlayerInitTime = generatePlayerInitTime();
+
+    this.attachShadow({ mode: 'open' });
+    this.#setupCSSProperties();
+
+    // If the custom element is defined before the <mux-player> HTML is parsed
+    // no attributes will be available in the constructor (construction process).
+    // Wait until initializing attributes in the attributeChangedCallback.
+    // If this element is connected to the DOM, the attributes will be available.
+    if (this.isConnected) {
+      this.#init();
+    }
+  }
+
+  #init() {
+    if (this.#isInit) return;
+    this.#isInit = true;
+
+    // The next line triggers the first render of the template.
+    this.#render();
+
+    // Fixes a bug in React where mux-player's CE children were not upgraded yet.
+    // These lines ensure the rendered mux-video and media-controller are upgraded,
+    // even before they are connected to the main document.
+    try {
+      customElements.upgrade(this.mediaTheme as Node);
+      if (!(this.mediaTheme instanceof globalThis.HTMLElement)) throw '';
+    } catch (_error) {
+      logger.error(`<media-theme> failed to upgrade!`);
+    }
+
+    try {
+      customElements.upgrade(this.media as Node);
+    } catch (_error) {
+      logger.error('underlying media element failed to upgrade!');
+    }
+
+    try {
+      customElements.upgrade(this.mediaController as Node);
+      if (!(this.mediaController instanceof MediaController)) throw '';
+    } catch (_error) {
+      logger.error(`<media-controller> failed to upgrade!`);
+    }
+
+    this.#setUpThemeAttributes();
+    this.#setUpErrors();
+    this.#setUpCaptionsButton();
+    this.#userInactive = this.mediaController?.hasAttribute(MediaControllerAttributes.USER_INACTIVE) ?? true;
+    this.#setUpCaptionsMovement();
+
+    // NOTE: Make sure we re-render when stream type changes to ensure other props-driven
+    // template details get updated appropriately (e.g. thumbnails track) (CJP)
+    this.media?.addEventListener('streamtypechange', () => this.#render());
+
+    // NOTE: Make sure we re-render when <source> tags are appended so hasSrc is updated.
+    this.media?.addEventListener('loadstart', () => this.#render());
+  }
+
+  #setupCSSProperties() {
+    // registerProperty will throw if the prop has already been registered
+    // and there's currently no way to check ahead of time.
+    // initialValue's are defined in the theme
+    try {
+      // @ts-ignore
+      window?.CSS?.registerProperty({
+        name: '--media-primary-color',
+        syntax: '<color>',
+        inherits: true,
+      });
+      // @ts-ignore
+      window?.CSS?.registerProperty({
+        name: '--media-secondary-color',
+        syntax: '<color>',
+        inherits: true,
+      });
+    } catch (_error) {}
+  }
+
+  get mediaTheme(): Element | null | undefined {
+    return this.shadowRoot?.querySelector('media-theme');
+  }
+
+  get mediaController(): MediaController | null | undefined {
+    return this.mediaTheme?.shadowRoot?.querySelector('media-controller');
+  }
+
+  connectedCallback() {
+    const muxVideo = this.media;
+    if (muxVideo) {
+      muxVideo.metadata = getMetadataFromAttrs(this);
+    }
+  }
+
+  #setState(newState: Record<string, any>) {
+    Object.assign(this.#state, newState);
+    this.#render();
+  }
+
+  #render(props: Record<string, any> = {}) {
+    render(template(getProps(this, { ...this.#state, ...props })), this.shadowRoot as Node);
+  }
+
+  #setUpThemeAttributes() {
+    // Forward `theme-` prefixed attributes to the theme.
+    // e.g. `theme-control-bar-vertical` for the Micro theme.
+    const setThemeAttribute = (attributeName: string | null) => {
+      if (!attributeName?.startsWith('theme-')) return;
+
+      const themeAttrName = attributeName.replace(/^theme-/, '');
+      if (ThemeAttributeNames.includes(themeAttrName)) return;
+
+      const value = this.getAttribute(attributeName);
+      if (value != null) {
+        this.mediaTheme?.setAttribute(themeAttrName, value);
+      } else {
+        this.mediaTheme?.removeAttribute(themeAttrName);
+      }
+    };
+
+    const observer = new MutationObserver((mutationList) => {
+      for (const { attributeName } of mutationList) {
+        setThemeAttribute(attributeName);
+      }
+    });
+
+    observer.observe(this, { attributes: true });
+    this.getAttributeNames().forEach(setThemeAttribute);
+  }
+
+  #setUpErrors() {
+    const onError = (_event: Event) => {
+      let error = this.media?.error as unknown as MediaError;
+
+      if (!(error instanceof MediaError)) {
+        const { message, code } = error ?? {};
+        error = new MediaError(message, code);
+      }
+
+      // Don't show an error dialog if it's not fatal.
+      if (!error?.fatal) {
+        logger.warn(error);
+        if (error.data) {
+          logger.warn(`${error.name} data:`, error.data);
+        }
+        return;
+      }
+
+      const devlog = muxMediaErrorToDevlog(error, false);
+
+      if (devlog.message) {
+        logger.devlog(devlog);
+      }
+
+      logger.error(error);
+      if (error.data) {
+        logger.error(`${error.name} data:`, error.data);
+      }
+
+      this.#setState({ isDialogOpen: true });
+    };
+
+    // Keep this event listener on mux-player instead of calling onError directly
+    // from video.onerror. This allows us to simulate errors from the outside.
+    this.addEventListener('error', onError);
+
+    /** @TODO Push errorTranslator logic down to playback-core. Should be able to use MediaError message + context + code (muxCode?) (CJP) */
+    if (this.media) {
+      this.media.errorTranslator = (errorEvent: ErrorEvent = {}) => {
+        if (!(this.media?.error instanceof MediaError)) return errorEvent;
+
+        const devlog = muxMediaErrorToDevlog(this.media?.error, false);
+
+        return {
+          player_error_code: this.media?.error.code,
+          player_error_message: devlog.message ? String(devlog.message) : errorEvent.player_error_message,
+          player_error_context: devlog.context ? String(devlog.context) : errorEvent.player_error_context,
+        };
+      };
+    }
+  }
+
+  #setUpCaptionsButton() {
+    const onTrackCountChange = () => this.#render();
+    this.media?.textTracks?.addEventListener('addtrack', onTrackCountChange);
+    this.media?.textTracks?.addEventListener('removetrack', onTrackCountChange);
+  }
+
+  #setUpCaptionsMovement() {
+    const isFirefox = /Firefox/i.test(navigator.userAgent);
+    if (!isFirefox) return;
+
+    let selectedTrack: TextTrack;
+    const cuesmap = new WeakMap();
+
+    const shouldSkipLineToggle = () => {
+      // skip line toggle when:
+      // - streamType is live, unless secondary color is set or player size is too small
+      // - native fullscreen on iPhones
+      return this.streamType === StreamTypes.LIVE && !this.secondaryColor && this.offsetWidth >= 800;
+    };
+
+    // toggles activeCues for a particular track depending on whether the user is active or not
+    const toggleLines = (track: TextTrack, userInactive: boolean, force = false) => {
+      if (shouldSkipLineToggle()) {
+        return;
+      }
+
+      const cues = Array.from((track && track.activeCues) || []) as VTTCue[];
+
+      cues.forEach((cue) => {
+        // ignore cues that are
+        // - positioned vertically via percentage.
+        // - cues that are not at the bottom
+        //   - line is less than -5
+        //   - line is between 0 and 10
+        // @ts-ignore
+        if (!cue.snapToLines || cue.line < -5 || (cue.line >= 0 && cue.line < 10)) {
+          return;
+        }
+
+        // if the user is active or if the player is paused, the captions should be moved up
+        if (!userInactive || this.paused) {
+          // for cues that have more than one line, we want to push the cue further up
+          const lines = cue.text.split('\n').length;
+          // start at -3 to account for thumbnails as well.
+          let offset = -3;
+
+          if (this.streamType === StreamTypes.LIVE) {
+            offset = -2;
+          }
+
+          const setTo = offset - lines;
+
+          // if the line is already set to -4, we don't want to update it again
+          // this can happen in the same tick on chrome and safari which fire a cuechange
+          // event when the line property is changed to a different value.
+          if (cue.line === setTo && !force) {
+            return;
+          }
+
+          if (!cuesmap.has(cue)) {
+            cuesmap.set(cue, cue.line);
+          }
+
+          cue.line = setTo;
+        } else {
+          setTimeout(() => {
+            cue.line = cuesmap.get(cue) || 'auto';
+          }, 500);
+        }
+      });
+    };
+
+    // this is necessary so that if a cue becomes active while the user is active, we still position it above the control bar
+    const cuechangeHandler = () => {
+      toggleLines(selectedTrack, this.mediaController?.hasAttribute(MediaControllerAttributes.USER_INACTIVE) ?? false);
+    };
+
+    const selectTrack = () => {
+      const tracks = Array.from(this.mediaController?.media?.textTracks || []) as TextTrack[];
+      const newSelectedTrack = tracks.filter(
+        (t) => ['subtitles', 'captions'].includes(t.kind) && t.mode === 'showing'
+      )[0] as TextTrack;
+
+      if (newSelectedTrack !== selectedTrack) {
+        selectedTrack?.removeEventListener('cuechange', cuechangeHandler);
+      }
+
+      selectedTrack = newSelectedTrack;
+      selectedTrack?.addEventListener('cuechange', cuechangeHandler);
+      // it's possible there are currently active cues on the new track
+      toggleLines(selectedTrack, this.#userInactive);
+    };
+
+    selectTrack();
+    // update the selected track as necessary
+    this.textTracks?.addEventListener('change', selectTrack);
+    this.textTracks?.addEventListener('addtrack', selectTrack);
+
+    this.addEventListener('userinactivechange', () => {
+      const newUserInactive = this.mediaController?.hasAttribute(MediaControllerAttributes.USER_INACTIVE) ?? true;
+
+      if (this.#userInactive === newUserInactive) {
+        return;
+      }
+
+      this.#userInactive = newUserInactive;
+
+      toggleLines(selectedTrack, this.#userInactive);
+    });
+  }
+
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string) {
+    // Initialize right after construction when the attributes become available.
+    this.#init();
+
+    super.attributeChangedCallback(attrName, oldValue, newValue);
+
+    switch (attrName) {
+      case PlayerAttributes.HOTKEYS:
+        this.#hotkeys.value = newValue;
+        break;
+      case PlayerAttributes.THUMBNAIL_TIME: {
+        if (newValue != null && this.tokens.thumbnail) {
+          logger.warn(
+            i18n(
+              `Use of thumbnail-time with thumbnail-token is currently unsupported. Ignore thumbnail-time.`
+            ).toString()
+          );
+        }
+        break;
+      }
+      case PlayerAttributes.THUMBNAIL_TOKEN: {
+        if (newValue) {
+          const jwtObj = parseJwt(newValue);
+          /** @TODO refactor to account for other JWT-based errors (CJP) */
+          if (jwtObj) {
+            const { aud } = jwtObj;
+            const expectedAud = MuxJWTAud.THUMBNAIL;
+            const tokenNamePrefix = 'thumbnail';
+            if (aud !== expectedAud) {
+              logger.warn(
+                i18n(
+                  `The {tokenNamePrefix}-token has an incorrect aud value: {aud}. aud value should be {expectedAud}.`
+                ).format({ aud, expectedAud, tokenNamePrefix })
+              );
+            }
+          }
+        }
+        break;
+      }
+      case PlayerAttributes.STORYBOARD_TOKEN: {
+        if (newValue) {
+          const jwtObj = parseJwt(newValue);
+          /** @TODO refactor to account for other JWT-based errors (CJP) */
+          if (jwtObj) {
+            const { aud } = jwtObj;
+            const expectedAud = MuxJWTAud.STORYBOARD;
+            const tokenNamePrefix = 'storyboard';
+            if (aud !== expectedAud) {
+              logger.warn(
+                i18n(
+                  `The {tokenNamePrefix}-token has an incorrect aud value: {aud}. aud value should be {expectedAud}.`
+                ).format({ aud, expectedAud, tokenNamePrefix })
+              );
+            }
+          }
+        }
+        break;
+      }
+      case PlayerAttributes.DRM_TOKEN: {
+        if (newValue) {
+          const jwtObj = parseJwt(newValue);
+          /** @TODO refactor to account for other JWT-based errors (CJP) */
+          if (jwtObj) {
+            const { aud } = jwtObj;
+            const expectedAud = MuxJWTAud.DRM;
+            const tokenNamePrefix = 'drm';
+            if (aud !== expectedAud) {
+              logger.warn(
+                i18n(
+                  `The {tokenNamePrefix}-token has an incorrect aud value: {aud}. aud value should be {expectedAud}.`
+                ).format({ aud, expectedAud, tokenNamePrefix })
+              );
+            }
+          }
+        }
+        break;
+      }
+      case MuxVideoAttributes.PLAYBACK_ID: {
+        if (newValue?.includes('?token')) {
+          logger.error(
+            i18n(
+              'The specificed playback ID {playbackId} contains a token which must be provided via the playback-token attribute.'
+            ).format({
+              playbackId: newValue,
+            })
+          );
+        }
+        break;
+      }
+      case MuxVideoAttributes.STREAM_TYPE: {
+        if (newValue && ![StreamTypes.LIVE, StreamTypes.ON_DEMAND, StreamTypes.UNKNOWN].includes(newValue as any)) {
+          // Handle deprecated values by translating to new properties for the time being.
+          // NOTE: The value of `streamType` / `stream-type` will be translated at the template
+          // level. See template.ts for more information (CJP).
+          if (['ll-live', 'live:dvr', 'll-live:dvr'].includes(this.streamType as any)) {
+            // NOTE: For now, we won't log any warnings/errors for "deprecated" stream types (CJP).
+            // logger.devlog({
+            //   file: 'deprecated-stream-type.md',
+            //   message: i18n(
+            //     `The stream type is deprecated: \`{streamType}\`. Please provide stream-type as either: \`on-demand\`, \`live\`. For DVR, please use \`target-live-window="Infinity"\``
+            //   ).format({ streamType: this.streamType }),
+            // });
+            this.targetLiveWindow = newValue.includes('dvr') ? Number.POSITIVE_INFINITY : 0;
+          } else {
+            logger.devlog({
+              file: 'invalid-stream-type.md',
+              message: i18n(
+                'Invalid stream-type value supplied: `{streamType}`. Please provide stream-type as either: `on-demand` or `live`'
+              ).format({ streamType: this.streamType }),
+            });
+          }
+        } else {
+          // NOTE: For now, since we are continuing support of the deprecated stream types (namely, "dvr" types) and not advertising the
+          // new APIs such as `targetLiveWindow`/`target-live-window`, we will (presumpuously) update the `targetLiveWindow` based on the
+          // stream type (CJP).
+          if (newValue === StreamTypes.LIVE) {
+            // Don't override if the user has already set a value.
+            if (this.getAttribute(PlayerAttributes.TARGET_LIVE_WINDOW) == null) {
+              this.targetLiveWindow = 0;
+            }
+          } else {
+            this.targetLiveWindow = Number.NaN;
+          }
+        }
+      }
+    }
+
+    const shouldClearState = [
+      MuxVideoAttributes.PLAYBACK_ID,
+      VideoAttributes.SRC,
+      PlayerAttributes.PLAYBACK_TOKEN,
+      // @ts-ignore
+    ].includes(attrName);
+
+    if (shouldClearState && oldValue !== newValue) {
+      this.#state = { ...this.#state, ...initialState };
+    }
+
+    this.#render({ [toPropName(attrName)]: newValue });
+  }
+
+  async requestFullscreen(_options?: FullscreenOptions) {
+    if (!this.mediaController || this.mediaController.hasAttribute(MediaUIAttributes.MEDIA_IS_FULLSCREEN)) {
+      return;
+    }
+    this.mediaController?.dispatchEvent(
+      new globalThis.CustomEvent(MediaUIEvents.MEDIA_ENTER_FULLSCREEN_REQUEST, {
+        composed: true,
+        bubbles: true,
+      })
+    );
+    return new Promise<void>((resolve, _reject) => {
+      this.mediaController?.addEventListener(MediaStateChangeEvents.MEDIA_IS_FULLSCREEN, () => resolve(), {
+        once: true,
+      });
+    });
+  }
+
+  async exitFullscreen() {
+    if (!this.mediaController || !this.mediaController.hasAttribute(MediaUIAttributes.MEDIA_IS_FULLSCREEN)) {
+      return;
+    }
+    this.mediaController?.dispatchEvent(
+      new globalThis.CustomEvent(MediaUIEvents.MEDIA_EXIT_FULLSCREEN_REQUEST, {
+        composed: true,
+        bubbles: true,
+      })
+    );
+    return new Promise<void>((resolve, _reject) => {
+      this.mediaController?.addEventListener(MediaStateChangeEvents.MEDIA_IS_FULLSCREEN, () => resolve(), {
+        once: true,
+      });
+    });
+  }
+
+  get preferCmcd() {
+    return (this.getAttribute(MuxVideoAttributes.PREFER_CMCD) as ValueOf<CmcdTypes>) ?? undefined;
+  }
+
+  set preferCmcd(value: ValueOf<CmcdTypes> | undefined) {
+    if (value === this.preferCmcd) return;
+    if (!value) {
+      this.removeAttribute(MuxVideoAttributes.PREFER_CMCD);
+    } else if (CmcdTypeValues.includes(value)) {
+      this.setAttribute(MuxVideoAttributes.PREFER_CMCD, value);
+    } else {
+      logger.warn(`Invalid value for preferCmcd. Must be one of ${CmcdTypeValues.join()}`);
+    }
+  }
+
+  get hasPlayed() {
+    return this.mediaController?.hasAttribute(MediaUIAttributes.MEDIA_HAS_PLAYED) ?? false;
+  }
+
+  get inLiveWindow() {
+    return this.mediaController?.hasAttribute(MediaUIAttributes.MEDIA_TIME_IS_LIVE);
+  }
+
+  get _hls(): PlaybackEngine | undefined {
+    return this.media?._hls;
+  }
+
+  get mux() {
+    return this.media?.mux;
+  }
+
+  /**
+   * Gets the theme.
+   */
+  get theme() {
+    return this.getAttribute(PlayerAttributes.THEME) ?? DefaultThemeName;
+  }
+
+  /**
+   * Sets the theme.
+   */
+  set theme(val) {
+    this.setAttribute(PlayerAttributes.THEME, `${val}`);
+  }
+
+  /**
+   * Get the theme attributes in a plain object (camelCase keys).
+   * This doesn't include already defined attributes. e.g. streamType, disabled, etc.
+   */
+  get themeProps() {
+    const theme = this.mediaTheme;
+    if (!theme) return;
+
+    const props: Record<string, any> = {};
+
+    for (const name of theme.getAttributeNames()) {
+      if (ThemeAttributeNames.includes(name)) continue;
+
+      const value: string | boolean | null = theme.getAttribute(name);
+      props[camelCase(name)] = value === '' ? true : value;
+    }
+
+    return props;
+  }
+
+  /**
+   * Set the theme attributes via a plain object.
+   */
+  set themeProps(props) {
+    this.#init();
+
+    const themeProps = { ...this.themeProps, ...props };
+
+    for (const name in themeProps) {
+      if (ThemeAttributeNames.includes(name)) continue;
+
+      const value: string | boolean | null | undefined = props?.[name];
+
+      if (typeof value === 'boolean' || value == null) {
+        this.mediaTheme?.toggleAttribute(kebabCase(name), Boolean(value));
+      } else {
+        this.mediaTheme?.setAttribute(kebabCase(name), value);
+      }
+    }
+  }
+
+  /**
+   * Get Mux asset playback id.
+   */
+  get playbackId() {
+    // Don't get the mux-video attribute here because it could have the
+    // playback token appended to it.
+    return this.getAttribute(MuxVideoAttributes.PLAYBACK_ID) ?? undefined;
+  }
+
+  /**
+   * Set Mux asset playback id.
+   */
+  set playbackId(val) {
+    if (val) {
+      this.setAttribute(MuxVideoAttributes.PLAYBACK_ID, val);
+    } else {
+      this.removeAttribute(MuxVideoAttributes.PLAYBACK_ID);
+    }
+  }
+
+  /**
+   * Get the string that reflects the src HTML attribute, which contains the URL of a media resource to use.
+   */
+  get src() {
+    // Only get the internal video.src if a playbackId is present.
+    if (this.playbackId) {
+      return getVideoAttribute(this, VideoAttributes.SRC) ?? undefined;
+    }
+    return this.getAttribute(VideoAttributes.SRC) ?? undefined;
+  }
+
+  /**
+   * Set the string that reflects the src HTML attribute, which contains the URL of a media resource to use.
+   */
+  set src(val) {
+    if (val) {
+      this.setAttribute(VideoAttributes.SRC, val);
+    } else {
+      this.removeAttribute(VideoAttributes.SRC);
+    }
+  }
+
+  /**
+   * Gets a URL of an image to display, for example, like a movie poster. This can be a still frame from the video, or another image if no video data is available.
+   */
+  get poster() {
+    const val = this.getAttribute(VideoAttributes.POSTER);
+    if (val != null) return val;
+    // If a playback token but no thumbnail token is provided,
+    // assume a token is required for the thumbnail/poster URL and
+    // simply avoid requesting it in this case.
+    const { tokens } = this;
+    if (tokens.playback && !tokens.thumbnail) {
+      logger.warn('Missing expected thumbnail token. No poster image will be shown');
+      return undefined;
+    }
+
+    // Get the derived poster if a playbackId is present.
+    if (this.playbackId && !this.audio) {
+      return getPosterURLFromPlaybackId(this.playbackId, {
+        customDomain: this.customDomain,
+        thumbnailTime: this.thumbnailTime ?? this.startTime,
+        programTime: this.programStartTime,
+        token: tokens.thumbnail,
+      });
+    }
+
+    return undefined;
+  }
+
+  /**
+   * Sets a URL of an image to display, for example, like a movie poster. This can be a still frame from the video, or another image if no video data is available.
+   */
+  set poster(val) {
+    if (val || val === '') {
+      this.setAttribute(VideoAttributes.POSTER, val);
+    } else {
+      this.removeAttribute(VideoAttributes.POSTER);
+    }
+  }
+
+  /**
+   * Return the storyboard-src attribute URL
+   */
+  get storyboardSrc() {
+    return this.getAttribute(PlayerAttributes.STORYBOARD_SRC) ?? undefined;
+  }
+
+  /**
+   * Set the storyboard-src attribute URL
+   */
+  set storyboardSrc(src: string | undefined) {
+    if (!src) {
+      this.removeAttribute(PlayerAttributes.STORYBOARD_SRC);
+    } else {
+      this.setAttribute(PlayerAttributes.STORYBOARD_SRC, src);
+    }
+  }
+
+  /**
+   * Return the storyboard URL when a playback ID or storyboard-src is provided,
+   * we aren't an audio player and the stream-type isn't live.
+   */
+  get storyboard() {
+    const { tokens } = this;
+    // If the storyboardSrc has been explicitly set, assume it should be used
+    if (this.storyboardSrc && !tokens.storyboard) return this.storyboardSrc;
+    if (
+      // NOTE: Some audio use cases may have a storyboard (e.g. it's an audio+video stream being played *as* audio)
+      // Consider supporting cases (CJP)
+      this.audio ||
+      !this.playbackId ||
+      !this.streamType ||
+      [StreamTypes.LIVE, StreamTypes.UNKNOWN].includes(this.streamType as any) ||
+      // If a playback token but no storyboard token is provided,
+      // assume a token is required for the storyboard URL URL and
+      // simply avoid requesting it in this case.
+      (tokens.playback && !tokens.storyboard)
+    ) {
+      return undefined;
+    }
+    return getStoryboardURLFromPlaybackId(this.playbackId, {
+      customDomain: this.customDomain,
+      token: tokens.storyboard,
+      programStartTime: this.programStartTime,
+      programEndTime: this.programEndTime,
+    });
+  }
+
+  /**
+   * Gets the boolean indicator this is an audio player.
+   */
+  get audio() {
+    return this.hasAttribute(PlayerAttributes.AUDIO);
+  }
+
+  /**
+   * Sets the boolean indicator this is an audio player.
+   */
+  set audio(val: boolean) {
+    if (!val) {
+      this.removeAttribute(PlayerAttributes.AUDIO);
+      return;
+    }
+    this.setAttribute(PlayerAttributes.AUDIO, '');
+  }
+
+  get hotkeys() {
+    return this.#hotkeys;
+  }
+
+  get nohotkeys() {
+    return this.hasAttribute(PlayerAttributes.NOHOTKEYS);
+  }
+
+  set nohotkeys(val: boolean) {
+    if (!val) {
+      this.removeAttribute(PlayerAttributes.NOHOTKEYS);
+      return;
+    }
+    this.setAttribute(PlayerAttributes.NOHOTKEYS, '');
+  }
+
+  /**
+   * Get the thumbnailTime offset used for the poster image.
+   */
+  get thumbnailTime() {
+    return toNumberOrUndefined(this.getAttribute(PlayerAttributes.THUMBNAIL_TIME));
+  }
+
+  /**
+   * Set the thumbnailTime offset used for the poster image.
+   */
+  set thumbnailTime(val: number | undefined) {
+    this.setAttribute(PlayerAttributes.THUMBNAIL_TIME, `${val}`);
+  }
+
+  /**
+   * Get the video title shown in the player.
+   */
+  get videoTitle() {
+    return this.getAttribute(PlayerAttributes.VIDEO_TITLE) ?? this.getAttribute(PlayerAttributes.TITLE) ?? '';
+  }
+
+  /**
+   * Set the video title shown in the player.
+   */
+  set videoTitle(val: string) {
+    if (val === this.videoTitle) return;
+
+    if (!!val) {
+      this.setAttribute(PlayerAttributes.VIDEO_TITLE, val);
+    } else {
+      this.removeAttribute(PlayerAttributes.VIDEO_TITLE);
+    }
+  }
+
+  /**
+   * Gets the data URL of a placeholder image shown before the thumbnail is loaded.
+   */
+  get placeholder() {
+    return getVideoAttribute(this, PlayerAttributes.PLACEHOLDER) ?? '';
+  }
+
+  /**
+   * Sets the data URL of a placeholder image shown before the thumbnail is loaded.
+   */
+  set placeholder(val) {
+    this.setAttribute(PlayerAttributes.PLACEHOLDER, `${val}`);
+  }
+
+  /**
+   * Get the primary color used by the player.
+   */
+  get primaryColor() {
+    let color = this.getAttribute(PlayerAttributes.PRIMARY_COLOR);
+    if (color != null) return color;
+
+    // Fallback to computed style if no attribute is set, causes layout.
+    // https://gist.github.com/paulirish/5d52fb081b3570c81e3a
+    if (this.mediaTheme) {
+      color = globalThis.getComputedStyle(this.mediaTheme)?.getPropertyValue('--_primary-color')?.trim();
+      if (color) return color;
+    }
+  }
+
+  /**
+   * Set the primary color used by the player.
+   */
+  set primaryColor(val: string | undefined) {
+    this.setAttribute(PlayerAttributes.PRIMARY_COLOR, `${val}`);
+  }
+
+  /**
+   * Get the secondary color used by the player.
+   */
+  get secondaryColor() {
+    let color = this.getAttribute(PlayerAttributes.SECONDARY_COLOR);
+    if (color != null) return color;
+
+    // Fallback to computed style if no attribute is set, causes layout.
+    // https://gist.github.com/paulirish/5d52fb081b3570c81e3a
+    if (this.mediaTheme) {
+      color = globalThis.getComputedStyle(this.mediaTheme)?.getPropertyValue('--_secondary-color')?.trim();
+      if (color) return color;
+    }
+  }
+
+  /**
+   * Set the secondary color used by the player.
+   */
+  set secondaryColor(val: string | undefined) {
+    this.setAttribute(PlayerAttributes.SECONDARY_COLOR, `${val}`);
+  }
+
+  /**
+   * Get the accent color used by the player.
+   */
+  get accentColor() {
+    let color = this.getAttribute(PlayerAttributes.ACCENT_COLOR);
+    if (color != null) return color;
+
+    // Fallback to computed style if no attribute is set, causes layout.
+    // https://gist.github.com/paulirish/5d52fb081b3570c81e3a
+    if (this.mediaTheme) {
+      color = globalThis.getComputedStyle(this.mediaTheme)?.getPropertyValue('--_accent-color')?.trim();
+      if (color) return color;
+    }
+  }
+
+  /**
+   * Set the accent color used by the player.
+   */
+  set accentColor(val: string | undefined) {
+    this.setAttribute(PlayerAttributes.ACCENT_COLOR, `${val}`);
+  }
+
+  get defaultShowRemainingTime() {
+    return this.hasAttribute(PlayerAttributes.DEFAULT_SHOW_REMAINING_TIME);
+  }
+
+  set defaultShowRemainingTime(val: boolean | undefined) {
+    if (!val) {
+      this.removeAttribute(PlayerAttributes.DEFAULT_SHOW_REMAINING_TIME);
+    } else {
+      this.setAttribute(PlayerAttributes.DEFAULT_SHOW_REMAINING_TIME, '');
+    }
+  }
+
+  /**
+   * Get the playback rates applied to the playback rate control.
+   */
+  get playbackRates() {
+    if (!this.hasAttribute(PlayerAttributes.PLAYBACK_RATES)) return undefined;
+    // /NOTE: This is duplicating the code from Media Chrome's media-playback-rate-button (CJP)
+    return (this.getAttribute(PlayerAttributes.PLAYBACK_RATES) as string)
+      .trim()
+      .split(/\s*,?\s+/)
+      .map((str) => Number(str))
+      .filter((num) => !Number.isNaN(num))
+      .sort((a, b) => a - b);
+  }
+
+  /**
+   * Set the playback rates applied to the playback rate control.
+   */
+  set playbackRates(val: number[] | undefined) {
+    if (!val) {
+      this.removeAttribute(PlayerAttributes.PLAYBACK_RATES);
+      return;
+    }
+    this.setAttribute(PlayerAttributes.PLAYBACK_RATES, val.join(' '));
+  }
+
+  /**
+   * Get the offset applied to the forward seek button.
+   */
+  get forwardSeekOffset() {
+    return toNumberOrUndefined(this.getAttribute(PlayerAttributes.FORWARD_SEEK_OFFSET)) ?? 10;
+  }
+
+  /**
+   * Set the offset applied to the forward seek button.
+   */
+  set forwardSeekOffset(val: number | undefined) {
+    this.setAttribute(PlayerAttributes.FORWARD_SEEK_OFFSET, `${val}`);
+  }
+
+  /**
+   * Get the offset applied to the backward seek button.
+   */
+  get backwardSeekOffset() {
+    return toNumberOrUndefined(this.getAttribute(PlayerAttributes.BACKWARD_SEEK_OFFSET)) ?? 10;
+  }
+
+  /**
+   * Set the offset applied to the forward seek button.
+   */
+  set backwardSeekOffset(val: number | undefined) {
+    this.setAttribute(PlayerAttributes.BACKWARD_SEEK_OFFSET, `${val}`);
+  }
+
+  /**
+   * Get the boolean value of default hidden captions.
+   * By default returns false so captions are enabled on initial load.
+   */
+  get defaultHiddenCaptions() {
+    return this.hasAttribute(PlayerAttributes.DEFAULT_HIDDEN_CAPTIONS);
+  }
+
+  /**
+   * Set the default hidden captions flag.
+   */
+  set defaultHiddenCaptions(val: boolean | undefined) {
+    if (!val) {
+      this.removeAttribute(PlayerAttributes.DEFAULT_HIDDEN_CAPTIONS);
+    } else {
+      this.setAttribute(PlayerAttributes.DEFAULT_HIDDEN_CAPTIONS, '');
+    }
+  }
+
+  /**
+   * Get the boolean value of default hidden captions.
+   * By default returns false so captions are enabled on initial load.
+   */
+  get defaultDuration() {
+    return toNumberOrUndefined(this.getAttribute(PlayerAttributes.DEFAULT_DURATION));
+  }
+
+  /**
+   * Set the default hidden captions flag.
+   */
+  set defaultDuration(val: number | undefined) {
+    if (val == undefined) {
+      this.removeAttribute(PlayerAttributes.DEFAULT_DURATION);
+    } else {
+      this.setAttribute(PlayerAttributes.DEFAULT_DURATION, `${val}`);
+    }
+  }
+
+  get playerInitTime() {
+    if (!this.hasAttribute(MuxVideoAttributes.PLAYER_INIT_TIME)) return this.#defaultPlayerInitTime;
+    return toNumberOrUndefined(this.getAttribute(MuxVideoAttributes.PLAYER_INIT_TIME));
+  }
+
+  set playerInitTime(val) {
+    // don't cause an infinite loop and avoid change event dispatching
+    if (val == this.playerInitTime) return;
+
+    if (val == null) {
+      this.removeAttribute(MuxVideoAttributes.PLAYER_INIT_TIME);
+    } else {
+      this.setAttribute(MuxVideoAttributes.PLAYER_INIT_TIME, `${+val}`);
+    }
+  }
+
+  /**
+   * Get the player software name. Used by Mux Data.
+   */
+  get playerSoftwareName() {
+    return this.getAttribute(MuxVideoAttributes.PLAYER_SOFTWARE_NAME) ?? playerSoftwareName;
+  }
+
+  /**
+   * Get the player software version. Used by Mux Data.
+   */
+  get playerSoftwareVersion() {
+    return this.getAttribute(MuxVideoAttributes.PLAYER_SOFTWARE_VERSION) ?? playerSoftwareVersion;
+  }
+
+  /**
+   * Get the beacon collection domain. Used by Mux Data.
+   */
+  get beaconCollectionDomain() {
+    return this.getAttribute(MuxVideoAttributes.BEACON_COLLECTION_DOMAIN) ?? undefined;
+  }
+
+  /**
+   * Set the beacon collection domain. Used by Mux Data.
+   */
+  set beaconCollectionDomain(val: string | undefined) {
+    // don't cause an infinite loop
+    if (val === this.beaconCollectionDomain) return;
+
+    if (val) {
+      this.setAttribute(MuxVideoAttributes.BEACON_COLLECTION_DOMAIN, val);
+    } else {
+      this.removeAttribute(MuxVideoAttributes.BEACON_COLLECTION_DOMAIN);
+    }
+  }
+
+  get maxResolution() {
+    return (this.getAttribute(MuxVideoAttributes.MAX_RESOLUTION) as MaxResolutionValue) ?? undefined;
+  }
+
+  set maxResolution(val: MaxResolutionValue | undefined) {
+    if (val === this.maxResolution) return;
+
+    if (val) {
+      this.setAttribute(MuxVideoAttributes.MAX_RESOLUTION, val);
+    } else {
+      this.removeAttribute(MuxVideoAttributes.MAX_RESOLUTION);
+    }
+  }
+
+  get minResolution() {
+    return (this.getAttribute(MuxVideoAttributes.MIN_RESOLUTION) as MinResolutionValue) ?? undefined;
+  }
+
+  set minResolution(val: MinResolutionValue | undefined) {
+    if (val === this.minResolution) return;
+
+    if (val) {
+      this.setAttribute(MuxVideoAttributes.MIN_RESOLUTION, val);
+    } else {
+      this.removeAttribute(MuxVideoAttributes.MIN_RESOLUTION);
+    }
+  }
+
+  get renditionOrder() {
+    return (this.getAttribute(MuxVideoAttributes.RENDITION_ORDER) as RenditionOrderValue) ?? undefined;
+  }
+
+  set renditionOrder(val: RenditionOrderValue | undefined) {
+    if (val === this.renditionOrder) return;
+
+    if (val) {
+      this.setAttribute(MuxVideoAttributes.RENDITION_ORDER, val);
+    } else {
+      this.removeAttribute(MuxVideoAttributes.RENDITION_ORDER);
+    }
+  }
+
+  get programStartTime() {
+    return toNumberOrUndefined(this.getAttribute(MuxVideoAttributes.PROGRAM_START_TIME));
+  }
+
+  set programStartTime(val: number | undefined) {
+    if (val == undefined) {
+      this.removeAttribute(MuxVideoAttributes.PROGRAM_START_TIME);
+    } else {
+      this.setAttribute(MuxVideoAttributes.PROGRAM_START_TIME, `${val}`);
+    }
+  }
+
+  get programEndTime() {
+    return toNumberOrUndefined(this.getAttribute(MuxVideoAttributes.PROGRAM_END_TIME));
+  }
+
+  set programEndTime(val: number | undefined) {
+    if (val == undefined) {
+      this.removeAttribute(MuxVideoAttributes.PROGRAM_END_TIME);
+    } else {
+      this.setAttribute(MuxVideoAttributes.PROGRAM_END_TIME, `${val}`);
+    }
+  }
+
+  get assetStartTime() {
+    return toNumberOrUndefined(this.getAttribute(MuxVideoAttributes.ASSET_START_TIME));
+  }
+
+  set assetStartTime(val: number | undefined) {
+    if (val == undefined) {
+      this.removeAttribute(MuxVideoAttributes.ASSET_START_TIME);
+    } else {
+      this.setAttribute(MuxVideoAttributes.ASSET_START_TIME, `${val}`);
+    }
+  }
+
+  get assetEndTime() {
+    return toNumberOrUndefined(this.getAttribute(MuxVideoAttributes.ASSET_END_TIME));
+  }
+
+  set assetEndTime(val: number | undefined) {
+    if (val == undefined) {
+      this.removeAttribute(MuxVideoAttributes.ASSET_END_TIME);
+    } else {
+      this.setAttribute(MuxVideoAttributes.ASSET_END_TIME, `${val}`);
+    }
+  }
+
+  get extraSourceParams() {
+    if (!this.hasAttribute(PlayerAttributes.EXTRA_SOURCE_PARAMS)) {
+      return DEFAULT_EXTRA_PLAYLIST_PARAMS;
+    }
+
+    return [...new URLSearchParams(this.getAttribute(PlayerAttributes.EXTRA_SOURCE_PARAMS) as string).entries()].reduce(
+      (paramsObj, [k, v]) => {
+        paramsObj[k] = v;
+        return paramsObj;
+      },
+      {} as Record<string, any>
+    );
+  }
+
+  set extraSourceParams(value: Record<string, any>) {
+    if (value == null) {
+      this.removeAttribute(PlayerAttributes.EXTRA_SOURCE_PARAMS);
+    } else {
+      this.setAttribute(PlayerAttributes.EXTRA_SOURCE_PARAMS, new URLSearchParams(value).toString());
+    }
+  }
+
+  /**
+   * Get Mux asset custom domain.
+   */
+  get customDomain() {
+    return this.getAttribute(MuxVideoAttributes.CUSTOM_DOMAIN) ?? undefined;
+  }
+
+  /**
+   * Set Mux asset custom domain.
+   */
+  set customDomain(val: string | undefined) {
+    // dont' cause an infinite loop
+    if (val === this.customDomain) return;
+
+    if (val) {
+      this.setAttribute(MuxVideoAttributes.CUSTOM_DOMAIN, val);
+    } else {
+      this.removeAttribute(MuxVideoAttributes.CUSTOM_DOMAIN);
+    }
+  }
+
+  /**
+   * Get Mux Data env key.
+   */
+  get envKey() {
+    return getVideoAttribute(this, MuxVideoAttributes.ENV_KEY) ?? undefined;
+  }
+
+  /**
+   * Set Mux Data env key.
+   */
+  set envKey(val: string | undefined) {
+    this.setAttribute(MuxVideoAttributes.ENV_KEY, `${val}`);
+  }
+
+  /**
+   * Get no-volume-pref flag.
+   */
+  get noVolumePref() {
+    return this.hasAttribute(PlayerAttributes.NO_VOLUME_PREF);
+  }
+
+  /**
+   * Set video engine debug flag.
+   */
+  set noVolumePref(val) {
+    if (val) {
+      this.setAttribute(PlayerAttributes.NO_VOLUME_PREF, '');
+    } else {
+      this.removeAttribute(PlayerAttributes.NO_VOLUME_PREF);
+    }
+  }
+
+  /**
+   * Get video engine debug flag.
+   */
+  get debug() {
+    return getVideoAttribute(this, MuxVideoAttributes.DEBUG) != null;
+  }
+
+  /**
+   * Set video engine debug flag.
+   */
+  set debug(val) {
+    if (val) {
+      this.setAttribute(MuxVideoAttributes.DEBUG, '');
+    } else {
+      this.removeAttribute(MuxVideoAttributes.DEBUG);
+    }
+  }
+
+  /**
+   * Get video engine disable tracking flag.
+   */
+  get disableTracking() {
+    return getVideoAttribute(this, MuxVideoAttributes.DISABLE_TRACKING) != null;
+  }
+
+  /**
+   * Set video engine disable tracking flag.
+   */
+  set disableTracking(val) {
+    this.toggleAttribute(MuxVideoAttributes.DISABLE_TRACKING, !!val);
+  }
+
+  /**
+   * Get video engine disable cookies flag.
+   */
+  get disableCookies() {
+    return getVideoAttribute(this, MuxVideoAttributes.DISABLE_COOKIES) != null;
+  }
+
+  /**
+   * Set video engine disable cookies flag.
+   */
+  set disableCookies(val) {
+    if (val) {
+      this.setAttribute(MuxVideoAttributes.DISABLE_COOKIES, '');
+    } else {
+      this.removeAttribute(MuxVideoAttributes.DISABLE_COOKIES);
+    }
+  }
+
+  /**
+   * Get stream type.
+   */
+  get streamType() {
+    return this.getAttribute(MuxVideoAttributes.STREAM_TYPE) ?? this.media?.streamType ?? StreamTypes.UNKNOWN;
+  }
+
+  /**
+   * Set stream type.
+   */
+  set streamType(val) {
+    this.setAttribute(MuxVideoAttributes.STREAM_TYPE, `${val}`);
+  }
+
+  get defaultStreamType() {
+    return (
+      (this.getAttribute(PlayerAttributes.DEFAULT_STREAM_TYPE) as ValueOf<StreamTypes>) ??
+      (this.mediaController?.getAttribute(PlayerAttributes.DEFAULT_STREAM_TYPE) as ValueOf<StreamTypes>) ??
+      StreamTypes.ON_DEMAND
+    );
+  }
+
+  set defaultStreamType(val: ValueOf<StreamTypes> | undefined) {
+    if (val) {
+      this.setAttribute(PlayerAttributes.DEFAULT_STREAM_TYPE, val);
+    } else {
+      this.removeAttribute(PlayerAttributes.DEFAULT_STREAM_TYPE);
+    }
+  }
+
+  get targetLiveWindow() {
+    // Allow overriding inferred `targetLiveWindow`
+    if (this.hasAttribute(PlayerAttributes.TARGET_LIVE_WINDOW)) {
+      return +(this.getAttribute(PlayerAttributes.TARGET_LIVE_WINDOW) as string) as number;
+    }
+    return this.media?.targetLiveWindow ?? Number.NaN;
+  }
+
+  set targetLiveWindow(val: number | undefined) {
+    // don't cause an infinite loop and avoid change event dispatching
+    if (val == this.targetLiveWindow || (Number.isNaN(val) && Number.isNaN(this.targetLiveWindow))) return;
+
+    if (val == null) {
+      this.removeAttribute(PlayerAttributes.TARGET_LIVE_WINDOW);
+    } else {
+      this.setAttribute(PlayerAttributes.TARGET_LIVE_WINDOW, `${+val}`);
+    }
+  }
+
+  get liveEdgeStart() {
+    return this.media?.liveEdgeStart;
+  }
+
+  /**
+   * Get the start time.
+   */
+  get startTime() {
+    return toNumberOrUndefined(getVideoAttribute(this, MuxVideoAttributes.START_TIME));
+  }
+
+  /**
+   * Set the start time.
+   */
+  set startTime(val) {
+    this.setAttribute(MuxVideoAttributes.START_TIME, `${val}`);
+  }
+
+  get preferPlayback(): ValueOf<PlaybackTypes> | undefined {
+    const val = this.getAttribute(MuxVideoAttributes.PREFER_PLAYBACK);
+    if (val === PlaybackTypes.MSE || val === PlaybackTypes.NATIVE) return val;
+    return undefined;
+  }
+
+  set preferPlayback(val: ValueOf<PlaybackTypes> | undefined) {
+    if (val === this.preferPlayback) return;
+
+    if (val === PlaybackTypes.MSE || val === PlaybackTypes.NATIVE) {
+      this.setAttribute(MuxVideoAttributes.PREFER_PLAYBACK, val);
+    } else {
+      this.removeAttribute(MuxVideoAttributes.PREFER_PLAYBACK);
+    }
+  }
+
+  /**
+   * Get the metadata object for Mux Data.
+   */
+  get metadata(): Readonly<Metadata> | undefined {
+    return this.media?.metadata;
+  }
+
+  /**
+   * Set the metadata object for Mux Data.
+   */
+  set metadata(val: Readonly<Metadata> | undefined) {
+    this.#init();
+
+    // NOTE: This condition should never be met. If it is, there is a bug (CJP)
+    if (!this.media) {
+      logger.error('underlying media element missing when trying to set metadata. metadata will not be set.');
+      return;
+    }
+    this.media.metadata = { ...getMetadataFromAttrs(this), ...val };
+  }
+
+  /**
+   * Get the metadata object for Mux Data.
+   */
+  get _hlsConfig() {
+    return this.media?._hlsConfig;
+  }
+
+  /**
+   * Set the metadata object for Mux Data.
+   */
+  set _hlsConfig(val: Readonly<Partial<HlsConfig>> | undefined) {
+    this.#init();
+
+    // NOTE: This condition should never be met. If it is, there is a bug (CJP)
+    if (!this.media) {
+      logger.error('underlying media element missing when trying to set _hlsConfig. _hlsConfig will not be set.');
+      return;
+    }
+    this.media._hlsConfig = val;
+  }
+
+  async addCuePoints<T = any>(cuePoints: CuePoint<T>[]) {
+    this.#init();
+
+    // NOTE: This condition should never be met. If it is, there is a bug (CJP)
+    if (!this.media) {
+      logger.error('underlying media element missing when trying to addCuePoints. cuePoints will not be added.');
+      return;
+    }
+    return this.media?.addCuePoints(cuePoints);
+  }
+
+  get activeCuePoint() {
+    return this.media?.activeCuePoint;
+  }
+
+  get cuePoints() {
+    return this.media?.cuePoints ?? [];
+  }
+
+  addChapters(chapters: Chapter[]) {
+    this.#init();
+
+    // NOTE: This condition should never be met. If it is, there is a bug (CJP)
+    if (!this.media) {
+      logger.error('underlying media element missing when trying to addChapters. chapters will not be added.');
+      return;
+    }
+
+    return this.media?.addChapters(chapters);
+  }
+
+  get activeChapter() {
+    return this.media?.activeChapter;
+  }
+
+  get chapters() {
+    return this.media?.chapters ?? [];
+  }
+
+  getStartDate() {
+    return this.media?.getStartDate();
+  }
+
+  get currentPdt() {
+    return this.media?.currentPdt;
+  }
+
+  /**
+   * Get the signing tokens for the Mux asset URL's.
+   */
+  get tokens(): Tokens {
+    const playback = this.getAttribute(PlayerAttributes.PLAYBACK_TOKEN);
+    const drm = this.getAttribute(PlayerAttributes.DRM_TOKEN);
+    const thumbnail = this.getAttribute(PlayerAttributes.THUMBNAIL_TOKEN);
+    const storyboard = this.getAttribute(PlayerAttributes.STORYBOARD_TOKEN);
+    return {
+      ...this.#tokens,
+      ...(playback != null ? { playback } : {}),
+      ...(drm != null ? { drm } : {}),
+      ...(thumbnail != null ? { thumbnail } : {}),
+      ...(storyboard != null ? { storyboard } : {}),
+    };
+  }
+
+  /**
+   * Set the signing tokens for the Mux asset URL's.
+   */
+  set tokens(val: Tokens | undefined) {
+    this.#tokens = val ?? {};
+  }
+
+  /**
+   * Get the playback token for signing the src URL.
+   */
+  get playbackToken() {
+    return this.getAttribute(PlayerAttributes.PLAYBACK_TOKEN) ?? undefined;
+  }
+
+  /**
+   * Set the playback token for signing the src URL.
+   */
+  set playbackToken(val) {
+    this.setAttribute(PlayerAttributes.PLAYBACK_TOKEN, `${val}`);
+  }
+
+  /**
+   * Get the playback token for signing the src URL.
+   */
+  get drmToken() {
+    return this.getAttribute(PlayerAttributes.DRM_TOKEN) ?? undefined;
+  }
+
+  /**
+   * Set the playback token for signing the src URL.
+   */
+  set drmToken(val) {
+    this.setAttribute(PlayerAttributes.DRM_TOKEN, `${val}`);
+  }
+
+  /**
+   * Get the thumbnail token for signing the poster URL.
+   */
+  get thumbnailToken() {
+    return this.getAttribute(PlayerAttributes.THUMBNAIL_TOKEN) ?? undefined;
+  }
+
+  /**
+   * Set the thumbnail token for signing the poster URL.
+   */
+  set thumbnailToken(val) {
+    this.setAttribute(PlayerAttributes.THUMBNAIL_TOKEN, `${val}`);
+  }
+
+  /**
+   * Get the storyboard token for signing the storyboard URL.
+   */
+  get storyboardToken() {
+    return this.getAttribute(PlayerAttributes.STORYBOARD_TOKEN) ?? undefined;
+  }
+
+  /**
+   * Set the storyboard token for signing the storyboard URL.
+   */
+  set storyboardToken(val) {
+    this.setAttribute(PlayerAttributes.STORYBOARD_TOKEN, `${val}`);
+  }
+
+  addTextTrack(kind: TextTrackKind, label: string, lang?: string, id?: string) {
+    const mediaEl = this.media?.nativeEl;
+    if (!mediaEl) return;
+    return addTextTrack(mediaEl, kind, label, lang, id);
+  }
+
+  removeTextTrack(track: TextTrack) {
+    const mediaEl = this.media?.nativeEl;
+    if (!mediaEl) return;
+    return removeTextTrack(mediaEl, track);
+  }
+
+  get textTracks() {
+    return this.media?.textTracks;
+  }
+
+  get castReceiver(): string | undefined {
+    return this.getAttribute(PlayerAttributes.CAST_RECEIVER) ?? undefined;
+  }
+
+  set castReceiver(val: string | undefined) {
+    if (val === this.castReceiver) return;
+    if (val) {
+      this.setAttribute(PlayerAttributes.CAST_RECEIVER, val);
+    } else {
+      this.removeAttribute(PlayerAttributes.CAST_RECEIVER);
+    }
+  }
+
+  get castCustomData() {
+    return this.media?.castCustomData;
+  }
+
+  set castCustomData(val) {
+    // NOTE: This condition should never be met. If it is, there is a bug (CJP)
+    if (!this.media) {
+      logger.error(
+        'underlying media element missing when trying to set castCustomData. castCustomData will not be set.'
+      );
+      return;
+    }
+    this.media.castCustomData = val;
+  }
+
+  get noTooltips() {
+    return this.hasAttribute(PlayerAttributes.NO_TOOLTIPS);
+  }
+
+  set noTooltips(val: boolean) {
+    if (!val) {
+      this.removeAttribute(PlayerAttributes.NO_TOOLTIPS);
+      return;
+    }
+    this.setAttribute(PlayerAttributes.NO_TOOLTIPS, '');
+  }
+
+  get proudlyDisplayMuxBadge() {
+    return this.hasAttribute(PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE);
+  }
+
+  set proudlyDisplayMuxBadge(val: boolean) {
+    if (!val) {
+      this.removeAttribute(PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE);
+    } else {
+      this.setAttribute(PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE, '');
+    }
+  }
+}
+
+export function getVideoAttribute(el: MuxPlayerElement, name: string) {
+  return el.media ? el.media.getAttribute(name) : el.getAttribute(name);
+}
+
+export default MuxPlayerElement;
diff --git a/packages/mux-player/src/index.ts b/packages/mux-player/src/index.ts
index 507ca751f..43d36b62d 100644
--- a/packages/mux-player/src/index.ts
+++ b/packages/mux-player/src/index.ts
@@ -1,1913 +1,12 @@
-import { globalThis, document } from './polyfills';
-import { MediaController, MediaErrorDialog } from 'media-chrome';
-import { Attributes as MediaControllerAttributes } from 'media-chrome/dist/media-container.js';
-import { MediaStateChangeEvents, MediaUIAttributes, MediaUIEvents } from 'media-chrome/dist/constants.js';
-import 'media-chrome/dist/experimental/index.js';
-import { MediaThemeElement } from 'media-chrome/dist/media-theme-element.js';
-import MuxVideoElement, { MediaError, Attributes as MuxVideoAttributes } from '@mux/mux-video';
-import {
-  StreamTypes,
-  PlaybackTypes,
-  addTextTrack,
-  removeTextTrack,
-  CmcdTypes,
-  CmcdTypeValues,
-  i18n,
-  parseJwt,
-  MuxJWTAud,
-  generatePlayerInitTime,
-} from '@mux/playback-core';
-import type {
-  ValueOf,
-  Metadata,
-  PlaybackEngine,
-  MaxResolutionValue,
-  MinResolutionValue,
-  RenditionOrderValue,
-  Chapter,
-  CuePoint,
-  Tokens,
-} from '@mux/playback-core';
-import VideoApiElement from './video-api';
-import {
-  getPlayerVersion,
-  toPropName,
-  AttributeTokenList,
-  getPosterURLFromPlaybackId,
-  getStoryboardURLFromPlaybackId,
-  getStreamTypeFromAttr,
-} from './helpers';
-import { template } from './template';
-import { render } from './html';
-import { muxMediaErrorToDialog, muxMediaErrorToDevlog } from './errors';
-import { toNumberOrUndefined, containsComposedNode, camelCase, kebabCase } from './utils';
-import * as logger from './logger';
-import type { MuxTemplateProps, ErrorEvent } from './types';
-import './themes/gerwig';
-import { HlsConfig } from 'hls.js';
-const DefaultThemeName = 'gerwig';
+import { globalThis } from './polyfills';
+// Register <mux-video> web component.
+import '@mux/mux-video';
+import MuxPlayerElement from '@mux/mux-player/base';
 
-export type { Tokens };
-
-export { MediaError, generatePlayerInitTime };
-
-const VideoAttributes = {
-  SRC: 'src',
-  POSTER: 'poster',
-};
-
-const PlayerAttributes = {
-  STYLE: 'style',
-  DEFAULT_HIDDEN_CAPTIONS: 'default-hidden-captions',
-  PRIMARY_COLOR: 'primary-color',
-  SECONDARY_COLOR: 'secondary-color',
-  ACCENT_COLOR: 'accent-color',
-  FORWARD_SEEK_OFFSET: 'forward-seek-offset',
-  BACKWARD_SEEK_OFFSET: 'backward-seek-offset',
-  PLAYBACK_TOKEN: 'playback-token',
-  THUMBNAIL_TOKEN: 'thumbnail-token',
-  STORYBOARD_TOKEN: 'storyboard-token',
-  DRM_TOKEN: 'drm-token',
-  STORYBOARD_SRC: 'storyboard-src',
-  THUMBNAIL_TIME: 'thumbnail-time',
-  AUDIO: 'audio',
-  NOHOTKEYS: 'nohotkeys',
-  HOTKEYS: 'hotkeys',
-  PLAYBACK_RATES: 'playbackrates',
-  DEFAULT_SHOW_REMAINING_TIME: 'default-show-remaining-time',
-  DEFAULT_DURATION: 'default-duration',
-  TITLE: 'title',
-  VIDEO_TITLE: 'video-title', // video-title is an alternative for title which doesn't cause a tooltip.
-  PLACEHOLDER: 'placeholder',
-  THEME: 'theme',
-  DEFAULT_STREAM_TYPE: 'default-stream-type',
-  TARGET_LIVE_WINDOW: 'target-live-window',
-  EXTRA_SOURCE_PARAMS: 'extra-source-params',
-  NO_VOLUME_PREF: 'no-volume-pref',
-  CAST_RECEIVER: 'cast-receiver',
-  NO_TOOLTIPS: 'no-tooltips',
-  PROUDLY_DISPLAY_MUX_BADGE: 'proudly-display-mux-badge',
-};
-
-const ThemeAttributeNames = [
-  'audio',
-  'backwardseekoffset',
-  'defaultduration',
-  'defaultshowremainingtime',
-  'defaultsubtitles',
-  'noautoseektolive',
-  'disabled',
-  'exportparts',
-  'forwardseekoffset',
-  'hideduration',
-  'hotkeys',
-  'nohotkeys',
-  'playbackrates',
-  'defaultstreamtype',
-  'streamtype',
-  'style',
-  'targetlivewindow',
-  'template',
-  'title',
-  'videotitle',
-  'novolumepref',
-  'proudlydisplaymuxbadge',
-];
-
-function getProps(el: MuxPlayerElement, state?: any): MuxTemplateProps {
-  const props = {
-    // Give priority to playbackId derrived asset URL's if playbackId is set.
-    src: !el.playbackId && el.src,
-    playbackId: el.playbackId,
-    hasSrc: !!el.playbackId || !!el.src || !!el.currentSrc,
-    poster: el.poster,
-    storyboard: el.storyboard,
-    storyboardSrc: el.getAttribute(PlayerAttributes.STORYBOARD_SRC),
-    placeholder: el.getAttribute('placeholder'),
-    themeTemplate: getThemeTemplate(el),
-    thumbnailTime: !el.tokens.thumbnail && el.thumbnailTime,
-    autoplay: el.autoplay,
-    crossOrigin: el.crossOrigin,
-    loop: el.loop,
-    // NOTE: Renaming internal prop due to state (sometimes derived from attributeChangedCallback attr values)
-    // overwriting prop value (type mismatch: string vs. boolean) (CJP)
-    noHotKeys: el.hasAttribute(PlayerAttributes.NOHOTKEYS),
-    hotKeys: el.getAttribute(PlayerAttributes.HOTKEYS),
-    muted: el.muted,
-    paused: el.paused,
-    // NOTE: Currently unsupported due to "default true attribute" problem
-    // playsInline: el.playsInline,
-    preload: el.preload,
-    envKey: el.envKey,
-    preferCmcd: el.preferCmcd,
-    debug: el.debug,
-    disableTracking: el.disableTracking,
-    disableCookies: el.disableCookies,
-    tokens: el.tokens,
-    beaconCollectionDomain: el.beaconCollectionDomain,
-    maxResolution: el.maxResolution,
-    minResolution: el.minResolution,
-    programStartTime: el.programStartTime,
-    programEndTime: el.programEndTime,
-    assetStartTime: el.assetStartTime,
-    assetEndTime: el.assetEndTime,
-    renditionOrder: el.renditionOrder,
-    metadata: el.metadata,
-    playerInitTime: el.playerInitTime,
-    playerSoftwareName: el.playerSoftwareName,
-    playerSoftwareVersion: el.playerSoftwareVersion,
-    startTime: el.startTime,
-    preferPlayback: el.preferPlayback,
-    audio: el.audio,
-    defaultStreamType: el.defaultStreamType,
-    targetLiveWindow: el.getAttribute(MuxVideoAttributes.TARGET_LIVE_WINDOW),
-    streamType: getStreamTypeFromAttr(el.getAttribute(MuxVideoAttributes.STREAM_TYPE)),
-    primaryColor: el.getAttribute(PlayerAttributes.PRIMARY_COLOR),
-    secondaryColor: el.getAttribute(PlayerAttributes.SECONDARY_COLOR),
-    accentColor: el.getAttribute(PlayerAttributes.ACCENT_COLOR),
-    forwardSeekOffset: el.forwardSeekOffset,
-    backwardSeekOffset: el.backwardSeekOffset,
-    defaultHiddenCaptions: el.defaultHiddenCaptions,
-    defaultDuration: el.defaultDuration,
-    defaultShowRemainingTime: el.defaultShowRemainingTime,
-    hideDuration: getHideDuration(el),
-    playbackRates: el.getAttribute(PlayerAttributes.PLAYBACK_RATES),
-    customDomain: el.getAttribute(MuxVideoAttributes.CUSTOM_DOMAIN) ?? undefined,
-    title: el.getAttribute(PlayerAttributes.TITLE),
-    videoTitle: el.getAttribute(PlayerAttributes.VIDEO_TITLE) ?? el.getAttribute(PlayerAttributes.TITLE),
-    novolumepref: el.hasAttribute(PlayerAttributes.NO_VOLUME_PREF),
-    castReceiver: el.castReceiver,
-    proudlyDisplayMuxBadge: el.hasAttribute(PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE),
-    ...state,
-    // NOTE: since the attribute value is used as the "source of truth" for the property getter,
-    // moving this below the `...state` spread so it resolves to the default value when unset (CJP)
-    extraSourceParams: el.extraSourceParams,
-  };
-
-  return props;
-}
-
-const baseFormatErrorMessage = MediaErrorDialog.formatErrorMessage;
-MediaErrorDialog.formatErrorMessage = (error: { code: number; message: string }) => {
-  if (error instanceof MediaError) {
-    const dialog = muxMediaErrorToDialog(error, false);
-    return `
-      ${dialog?.title ? `<h3>${dialog.title}</h3>` : ''}
-      ${
-        dialog?.message || dialog?.linkUrl
-          ? `<p>
-        ${dialog?.message}
-        ${
-          dialog?.linkUrl
-            ? `<a
-              href="${dialog.linkUrl}"
-              target="_blank"
-              rel="external noopener"
-              aria-label="${dialog.linkText ?? ''} ${i18n(`(opens in a new window)`)}"
-              >${dialog.linkText ?? dialog.linkUrl}</a
-            >`
-            : ''
-        }
-      </p>`
-          : ''
-      }
-    `;
-  }
-  return baseFormatErrorMessage(error);
-};
-
-function getThemeTemplate(el: MuxPlayerElement) {
-  let themeName = el.theme;
-
-  if (themeName) {
-    const templateElement = (el.getRootNode() as ShadowRoot | Document | null)?.getElementById?.(themeName);
-    // NOTE: Since folks may unknowingly use matching ids for elements other than their theme
-    // (intending to use path two for template identification, below), make sure the matching
-    // element is, in fact, an HTMLTemplateElement (CJP)
-    if (templateElement && templateElement instanceof HTMLTemplateElement) return templateElement;
-
-    if (!themeName.startsWith('media-theme-')) {
-      themeName = `media-theme-${themeName}`;
-    }
-
-    const ThemeElement = globalThis.customElements.get(themeName) as MediaThemeElement | undefined;
-    if (ThemeElement?.template) return ThemeElement.template;
-  }
-}
-
-function getHideDuration(el: MuxPlayerElement) {
-  const timeDisplay = el.mediaController?.querySelector('media-time-display');
-  return (
-    timeDisplay &&
-    getComputedStyle(timeDisplay as unknown as HTMLElement)
-      .getPropertyValue('--media-duration-display-display')
-      .trim() === 'none'
-  );
-}
-
-function getMetadataFromAttrs(el: MuxPlayerElement) {
-  // Adding title defaulting, when present, as a seed value here to ensure it's
-  // overridden by metadata-video-title if it is also present. (CJP)
-  const seedValue: { [key: string]: string } = !!el.videoTitle ? { video_title: el.videoTitle } : {};
-  return el
-    .getAttributeNames()
-    .filter((attrName) => attrName.startsWith('metadata-'))
-    .reduce((currAttrs, attrName) => {
-      const value = el.getAttribute(attrName);
-      if (value !== null) {
-        currAttrs[attrName.replace(/^metadata-/, '').replace(/-/g, '_')] = value;
-      }
-      return currAttrs;
-    }, seedValue);
-}
-
-const MuxVideoAttributeNames = Object.values(MuxVideoAttributes);
-const VideoAttributeNames = Object.values(VideoAttributes);
-const PlayerAttributeNames = Object.values(PlayerAttributes);
-
-export const playerSoftwareVersion = getPlayerVersion();
-export const playerSoftwareName = 'mux-player';
-
-const initialState = {
-  isDialogOpen: false,
-};
-
-const DEFAULT_EXTRA_PLAYLIST_PARAMS = { redundant_streams: true };
-
-export interface MuxPlayerElementEventMap extends HTMLVideoElementEventMap {
-  cuepointchange: CustomEvent<{ time: number; value: any }>;
-  cuepointschange: CustomEvent<Array<{ time: number; value: any }>>;
-  chapterchange: CustomEvent<{ startTime: number; endTime: number; value: string }>;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
-interface MuxPlayerElement
-  extends Omit<
-    HTMLVideoElement,
-    | 'poster'
-    | 'textTracks'
-    | 'addTextTrack'
-    | 'src'
-    | 'videoTracks'
-    | 'audioTracks'
-    | 'audioRenditions'
-    | 'videoRenditions'
-  > {
-  addEventListener<K extends keyof MuxPlayerElementEventMap>(
-    type: K,
-    listener: (this: HTMLMediaElement, ev: MuxPlayerElementEventMap[K]) => any,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-  addEventListener(
-    type: string,
-    listener: EventListenerOrEventListenerObject,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-  removeEventListener<K extends keyof MuxPlayerElementEventMap>(
-    type: K,
-    listener: (this: HTMLMediaElement, ev: MuxPlayerElementEventMap[K]) => any,
-    options?: boolean | EventListenerOptions
-  ): void;
-  removeEventListener(
-    type: string,
-    listener: EventListenerOrEventListenerObject,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
-class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement {
-  #defaultPlayerInitTime: number;
-  #isInit = false;
-  #tokens: Tokens = {};
-  #userInactive = true;
-  #hotkeys = new AttributeTokenList(this, 'hotkeys');
-  #state: Partial<MuxTemplateProps> = {
-    ...initialState,
-    onCloseErrorDialog: (event) => {
-      const localName = (event.composedPath()[0] as HTMLElement)?.localName;
-      if (localName !== 'media-error-dialog') return;
-
-      this.#setState({ isDialogOpen: false });
-    },
-    onFocusInErrorDialog: (event) => {
-      const localName = (event.composedPath()[0] as HTMLElement)?.localName;
-      if (localName !== 'media-error-dialog') return;
-
-      const isFocusedElementInPlayer = containsComposedNode(this, document.activeElement);
-      if (!isFocusedElementInPlayer) event.preventDefault();
-    },
-  };
-
-  static get NAME() {
-    return playerSoftwareName;
-  }
-
-  static get VERSION() {
-    return playerSoftwareVersion;
-  }
-
-  static get observedAttributes() {
-    return [
-      ...(VideoApiElement.observedAttributes ?? []),
-      ...VideoAttributeNames,
-      ...MuxVideoAttributeNames,
-      ...PlayerAttributeNames,
-    ];
-  }
-
-  constructor() {
-    super();
-    this.#defaultPlayerInitTime = generatePlayerInitTime();
-
-    this.attachShadow({ mode: 'open' });
-    this.#setupCSSProperties();
-
-    // If the custom element is defined before the <mux-player> HTML is parsed
-    // no attributes will be available in the constructor (construction process).
-    // Wait until initializing attributes in the attributeChangedCallback.
-    // If this element is connected to the DOM, the attributes will be available.
-    if (this.isConnected) {
-      this.#init();
-    }
-  }
-
-  #init() {
-    if (this.#isInit) return;
-    this.#isInit = true;
-
-    // The next line triggers the first render of the template.
-    this.#render();
-
-    // Fixes a bug in React where mux-player's CE children were not upgraded yet.
-    // These lines ensure the rendered mux-video and media-controller are upgraded,
-    // even before they are connected to the main document.
-    try {
-      customElements.upgrade(this.mediaTheme as Node);
-      if (!(this.mediaTheme instanceof globalThis.HTMLElement)) throw '';
-    } catch (_error) {
-      logger.error(`<media-theme> failed to upgrade!`);
-    }
-
-    try {
-      customElements.upgrade(this.media as Node);
-      if (!(this.media instanceof MuxVideoElement)) throw '';
-    } catch (_error) {
-      logger.error('<mux-video> failed to upgrade!');
-    }
-
-    try {
-      customElements.upgrade(this.mediaController as Node);
-      if (!(this.mediaController instanceof MediaController)) throw '';
-    } catch (_error) {
-      logger.error(`<media-controller> failed to upgrade!`);
-    }
-
-    this.init();
-
-    this.#setUpThemeAttributes();
-    this.#setUpErrors();
-    this.#setUpCaptionsButton();
-    this.#userInactive = this.mediaController?.hasAttribute(MediaControllerAttributes.USER_INACTIVE) ?? true;
-    this.#setUpCaptionsMovement();
-
-    // NOTE: Make sure we re-render when stream type changes to ensure other props-driven
-    // template details get updated appropriately (e.g. thumbnails track) (CJP)
-    this.media?.addEventListener('streamtypechange', () => this.#render());
-
-    // NOTE: Make sure we re-render when <source> tags are appended so hasSrc is updated.
-    this.media?.addEventListener('loadstart', () => this.#render());
-  }
-
-  #setupCSSProperties() {
-    // registerProperty will throw if the prop has already been registered
-    // and there's currently no way to check ahead of time.
-    // initialValue's are defined in the theme
-    try {
-      // @ts-ignore
-      window?.CSS?.registerProperty({
-        name: '--media-primary-color',
-        syntax: '<color>',
-        inherits: true,
-      });
-      // @ts-ignore
-      window?.CSS?.registerProperty({
-        name: '--media-secondary-color',
-        syntax: '<color>',
-        inherits: true,
-      });
-    } catch (_error) {}
-  }
-
-  get mediaTheme(): Element | null | undefined {
-    return this.shadowRoot?.querySelector('media-theme');
-  }
-
-  get mediaController(): MediaController | null | undefined {
-    return this.mediaTheme?.shadowRoot?.querySelector('media-controller');
-  }
-
-  connectedCallback() {
-    const muxVideo = this.shadowRoot?.querySelector('mux-video') as MuxVideoElement;
-    if (muxVideo) {
-      muxVideo.metadata = getMetadataFromAttrs(this);
-    }
-  }
-
-  #setState(newState: Record<string, any>) {
-    Object.assign(this.#state, newState);
-    this.#render();
-  }
-
-  #render(props: Record<string, any> = {}) {
-    render(template(getProps(this, { ...this.#state, ...props })), this.shadowRoot as Node);
-  }
-
-  #setUpThemeAttributes() {
-    // Forward `theme-` prefixed attributes to the theme.
-    // e.g. `theme-control-bar-vertical` for the Micro theme.
-    const setThemeAttribute = (attributeName: string | null) => {
-      if (!attributeName?.startsWith('theme-')) return;
-
-      const themeAttrName = attributeName.replace(/^theme-/, '');
-      if (ThemeAttributeNames.includes(themeAttrName)) return;
-
-      const value = this.getAttribute(attributeName);
-      if (value != null) {
-        this.mediaTheme?.setAttribute(themeAttrName, value);
-      } else {
-        this.mediaTheme?.removeAttribute(themeAttrName);
-      }
-    };
-
-    const observer = new MutationObserver((mutationList) => {
-      for (const { attributeName } of mutationList) {
-        setThemeAttribute(attributeName);
-      }
-    });
-
-    observer.observe(this, { attributes: true });
-    this.getAttributeNames().forEach(setThemeAttribute);
-  }
-
-  #setUpErrors() {
-    const onError = (event: Event) => {
-      let { detail: error }: { detail: any } = event as CustomEvent;
-
-      if (!(error instanceof MediaError)) {
-        error = new MediaError(error.message, error.code, error.fatal);
-      }
-
-      // Don't show an error dialog if it's not fatal.
-      if (!error?.fatal) {
-        logger.warn(error);
-        if (error.data) {
-          logger.warn(`${error.name} data:`, error.data);
-        }
-        return;
-      }
-
-      const devlog = muxMediaErrorToDevlog(error, false);
-
-      if (devlog.message) {
-        logger.devlog(devlog);
-      }
-
-      logger.error(error);
-      if (error.data) {
-        logger.error(`${error.name} data:`, error.data);
-      }
-
-      this.#setState({ isDialogOpen: true });
-    };
-
-    // Keep this event listener on mux-player instead of calling onError directly
-    // from video.onerror. This allows us to simulate errors from the outside.
-    this.addEventListener('error', onError);
-
-    /** @TODO Push errorTranslator logic down to playback-core. Should be able to use MediaError message + context + code (muxCode?) (CJP) */
-    if (this.media) {
-      this.media.errorTranslator = (errorEvent: ErrorEvent = {}) => {
-        if (!(this.media?.error instanceof MediaError)) return errorEvent;
-
-        const devlog = muxMediaErrorToDevlog(this.media?.error, false);
-
-        return {
-          player_error_code: this.media?.error.code,
-          player_error_message: devlog.message ? String(devlog.message) : errorEvent.player_error_message,
-          player_error_context: devlog.context ? String(devlog.context) : errorEvent.player_error_context,
-        };
-      };
-    }
-
-    this.media?.addEventListener('error', (event: Event) => {
-      let { detail: error }: { detail: any } = event as CustomEvent;
-
-      // If it is a hls.js error event there will be an error object in the event.
-      // If it is a native video error event there will be no error object.
-      if (!error) {
-        const { message, code } = this.media?.error ?? {};
-        error = new MediaError(message, code);
-      }
-
-      // Don't fire a mux-player error event for non-fatal errors.
-      if (!error?.fatal) return;
-
-      this.dispatchEvent(
-        new CustomEvent('error', {
-          detail: error,
-        })
-      );
-    });
-  }
-
-  #setUpCaptionsButton() {
-    const onTrackCountChange = () => this.#render();
-    this.media?.textTracks?.addEventListener('addtrack', onTrackCountChange);
-    this.media?.textTracks?.addEventListener('removetrack', onTrackCountChange);
-  }
-
-  #setUpCaptionsMovement() {
-    const isFirefox = /Firefox/i.test(navigator.userAgent);
-    if (!isFirefox) return;
-
-    let selectedTrack: TextTrack;
-    const cuesmap = new WeakMap();
-
-    const shouldSkipLineToggle = () => {
-      // skip line toggle when:
-      // - streamType is live, unless secondary color is set or player size is too small
-      // - native fullscreen on iPhones
-      return this.streamType === StreamTypes.LIVE && !this.secondaryColor && this.offsetWidth >= 800;
-    };
-
-    // toggles activeCues for a particular track depending on whether the user is active or not
-    const toggleLines = (track: TextTrack, userInactive: boolean, force = false) => {
-      if (shouldSkipLineToggle()) {
-        return;
-      }
-
-      const cues = Array.from((track && track.activeCues) || []) as VTTCue[];
-
-      cues.forEach((cue) => {
-        // ignore cues that are
-        // - positioned vertically via percentage.
-        // - cues that are not at the bottom
-        //   - line is less than -5
-        //   - line is between 0 and 10
-        // @ts-ignore
-        if (!cue.snapToLines || cue.line < -5 || (cue.line >= 0 && cue.line < 10)) {
-          return;
-        }
-
-        // if the user is active or if the player is paused, the captions should be moved up
-        if (!userInactive || this.paused) {
-          // for cues that have more than one line, we want to push the cue further up
-          const lines = cue.text.split('\n').length;
-          // start at -3 to account for thumbnails as well.
-          let offset = -3;
-
-          if (this.streamType === StreamTypes.LIVE) {
-            offset = -2;
-          }
-
-          const setTo = offset - lines;
-
-          // if the line is already set to -4, we don't want to update it again
-          // this can happen in the same tick on chrome and safari which fire a cuechange
-          // event when the line property is changed to a different value.
-          if (cue.line === setTo && !force) {
-            return;
-          }
-
-          if (!cuesmap.has(cue)) {
-            cuesmap.set(cue, cue.line);
-          }
-
-          cue.line = setTo;
-        } else {
-          setTimeout(() => {
-            cue.line = cuesmap.get(cue) || 'auto';
-          }, 500);
-        }
-      });
-    };
-
-    // this is necessary so that if a cue becomes active while the user is active, we still position it above the control bar
-    const cuechangeHandler = () => {
-      toggleLines(selectedTrack, this.mediaController?.hasAttribute(MediaControllerAttributes.USER_INACTIVE) ?? false);
-    };
-
-    const selectTrack = () => {
-      const tracks = Array.from(this.mediaController?.media?.textTracks || []) as TextTrack[];
-      const newSelectedTrack = tracks.filter(
-        (t) => ['subtitles', 'captions'].includes(t.kind) && t.mode === 'showing'
-      )[0] as TextTrack;
-
-      if (newSelectedTrack !== selectedTrack) {
-        selectedTrack?.removeEventListener('cuechange', cuechangeHandler);
-      }
-
-      selectedTrack = newSelectedTrack;
-      selectedTrack?.addEventListener('cuechange', cuechangeHandler);
-      // it's possible there are currently active cues on the new track
-      toggleLines(selectedTrack, this.#userInactive);
-    };
-
-    selectTrack();
-    // update the selected track as necessary
-    this.textTracks?.addEventListener('change', selectTrack);
-    this.textTracks?.addEventListener('addtrack', selectTrack);
-
-    this.addEventListener('userinactivechange', () => {
-      const newUserInactive = this.mediaController?.hasAttribute(MediaControllerAttributes.USER_INACTIVE) ?? true;
-
-      if (this.#userInactive === newUserInactive) {
-        return;
-      }
-
-      this.#userInactive = newUserInactive;
-
-      toggleLines(selectedTrack, this.#userInactive);
-    });
-  }
-
-  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string) {
-    // Initialize right after construction when the attributes become available.
-    this.#init();
-
-    super.attributeChangedCallback(attrName, oldValue, newValue);
-
-    switch (attrName) {
-      case PlayerAttributes.HOTKEYS:
-        this.#hotkeys.value = newValue;
-        break;
-      case PlayerAttributes.THUMBNAIL_TIME: {
-        if (newValue != null && this.tokens.thumbnail) {
-          logger.warn(
-            i18n(
-              `Use of thumbnail-time with thumbnail-token is currently unsupported. Ignore thumbnail-time.`
-            ).toString()
-          );
-        }
-        break;
-      }
-      case PlayerAttributes.THUMBNAIL_TOKEN: {
-        if (newValue) {
-          const jwtObj = parseJwt(newValue);
-          /** @TODO refactor to account for other JWT-based errors (CJP) */
-          if (jwtObj) {
-            const { aud } = jwtObj;
-            const expectedAud = MuxJWTAud.THUMBNAIL;
-            const tokenNamePrefix = 'thumbnail';
-            if (aud !== expectedAud) {
-              logger.warn(
-                i18n(
-                  `The {tokenNamePrefix}-token has an incorrect aud value: {aud}. aud value should be {expectedAud}.`
-                ).format({ aud, expectedAud, tokenNamePrefix })
-              );
-            }
-          }
-        }
-        break;
-      }
-      case PlayerAttributes.STORYBOARD_TOKEN: {
-        if (newValue) {
-          const jwtObj = parseJwt(newValue);
-          /** @TODO refactor to account for other JWT-based errors (CJP) */
-          if (jwtObj) {
-            const { aud } = jwtObj;
-            const expectedAud = MuxJWTAud.STORYBOARD;
-            const tokenNamePrefix = 'storyboard';
-            if (aud !== expectedAud) {
-              logger.warn(
-                i18n(
-                  `The {tokenNamePrefix}-token has an incorrect aud value: {aud}. aud value should be {expectedAud}.`
-                ).format({ aud, expectedAud, tokenNamePrefix })
-              );
-            }
-          }
-        }
-        break;
-      }
-      case PlayerAttributes.DRM_TOKEN: {
-        if (newValue) {
-          const jwtObj = parseJwt(newValue);
-          /** @TODO refactor to account for other JWT-based errors (CJP) */
-          if (jwtObj) {
-            const { aud } = jwtObj;
-            const expectedAud = MuxJWTAud.DRM;
-            const tokenNamePrefix = 'drm';
-            if (aud !== expectedAud) {
-              logger.warn(
-                i18n(
-                  `The {tokenNamePrefix}-token has an incorrect aud value: {aud}. aud value should be {expectedAud}.`
-                ).format({ aud, expectedAud, tokenNamePrefix })
-              );
-            }
-          }
-        }
-        break;
-      }
-      case MuxVideoAttributes.PLAYBACK_ID: {
-        if (newValue?.includes('?token')) {
-          logger.error(
-            i18n(
-              'The specificed playback ID {playbackId} contains a token which must be provided via the playback-token attribute.'
-            ).format({
-              playbackId: newValue,
-            })
-          );
-        }
-        break;
-      }
-      case MuxVideoAttributes.STREAM_TYPE: {
-        if (newValue && ![StreamTypes.LIVE, StreamTypes.ON_DEMAND, StreamTypes.UNKNOWN].includes(newValue as any)) {
-          // Handle deprecated values by translating to new properties for the time being.
-          // NOTE: The value of `streamType` / `stream-type` will be translated at the template
-          // level. See template.ts for more information (CJP).
-          if (['ll-live', 'live:dvr', 'll-live:dvr'].includes(this.streamType as any)) {
-            // NOTE: For now, we won't log any warnings/errors for "deprecated" stream types (CJP).
-            // logger.devlog({
-            //   file: 'deprecated-stream-type.md',
-            //   message: i18n(
-            //     `The stream type is deprecated: \`{streamType}\`. Please provide stream-type as either: \`on-demand\`, \`live\`. For DVR, please use \`target-live-window="Infinity"\``
-            //   ).format({ streamType: this.streamType }),
-            // });
-            this.targetLiveWindow = newValue.includes('dvr') ? Number.POSITIVE_INFINITY : 0;
-          } else {
-            logger.devlog({
-              file: 'invalid-stream-type.md',
-              message: i18n(
-                'Invalid stream-type value supplied: `{streamType}`. Please provide stream-type as either: `on-demand` or `live`'
-              ).format({ streamType: this.streamType }),
-            });
-          }
-        } else {
-          // NOTE: For now, since we are continuing support of the deprecated stream types (namely, "dvr" types) and not advertising the
-          // new APIs such as `targetLiveWindow`/`target-live-window`, we will (presumpuously) update the `targetLiveWindow` based on the
-          // stream type (CJP).
-          if (newValue === StreamTypes.LIVE) {
-            // Don't override if the user has already set a value.
-            if (this.getAttribute(PlayerAttributes.TARGET_LIVE_WINDOW) == null) {
-              this.targetLiveWindow = 0;
-            }
-          } else {
-            this.targetLiveWindow = Number.NaN;
-          }
-        }
-      }
-    }
-
-    const shouldClearState = [
-      MuxVideoAttributes.PLAYBACK_ID,
-      VideoAttributes.SRC,
-      PlayerAttributes.PLAYBACK_TOKEN,
-    ].includes(attrName);
-
-    if (shouldClearState && oldValue !== newValue) {
-      this.#state = { ...this.#state, ...initialState };
-    }
-
-    this.#render({ [toPropName(attrName)]: newValue });
-  }
-
-  async requestFullscreen(_options?: FullscreenOptions) {
-    if (!this.mediaController || this.mediaController.hasAttribute(MediaUIAttributes.MEDIA_IS_FULLSCREEN)) {
-      return;
-    }
-    this.mediaController?.dispatchEvent(
-      new globalThis.CustomEvent(MediaUIEvents.MEDIA_ENTER_FULLSCREEN_REQUEST, {
-        composed: true,
-        bubbles: true,
-      })
-    );
-    return new Promise<void>((resolve, _reject) => {
-      this.mediaController?.addEventListener(MediaStateChangeEvents.MEDIA_IS_FULLSCREEN, () => resolve(), {
-        once: true,
-      });
-    });
-  }
-
-  async exitFullscreen() {
-    if (!this.mediaController || !this.mediaController.hasAttribute(MediaUIAttributes.MEDIA_IS_FULLSCREEN)) {
-      return;
-    }
-    this.mediaController?.dispatchEvent(
-      new globalThis.CustomEvent(MediaUIEvents.MEDIA_EXIT_FULLSCREEN_REQUEST, {
-        composed: true,
-        bubbles: true,
-      })
-    );
-    return new Promise<void>((resolve, _reject) => {
-      this.mediaController?.addEventListener(MediaStateChangeEvents.MEDIA_IS_FULLSCREEN, () => resolve(), {
-        once: true,
-      });
-    });
-  }
-
-  get preferCmcd() {
-    return (this.getAttribute(MuxVideoAttributes.PREFER_CMCD) as ValueOf<CmcdTypes>) ?? undefined;
-  }
-
-  set preferCmcd(value: ValueOf<CmcdTypes> | undefined) {
-    if (value === this.preferCmcd) return;
-    if (!value) {
-      this.removeAttribute(MuxVideoAttributes.PREFER_CMCD);
-    } else if (CmcdTypeValues.includes(value)) {
-      this.setAttribute(MuxVideoAttributes.PREFER_CMCD, value);
-    } else {
-      logger.warn(`Invalid value for preferCmcd. Must be one of ${CmcdTypeValues.join()}`);
-    }
-  }
-
-  get hasPlayed() {
-    return this.mediaController?.hasAttribute(MediaUIAttributes.MEDIA_HAS_PLAYED) ?? false;
-  }
-
-  get inLiveWindow() {
-    return this.mediaController?.hasAttribute(MediaUIAttributes.MEDIA_TIME_IS_LIVE);
-  }
-
-  get _hls(): PlaybackEngine | undefined {
-    return this.media?._hls;
-  }
-
-  get mux() {
-    return this.media?.mux;
-  }
-
-  /**
-   * Gets the theme.
-   */
-  get theme() {
-    return this.getAttribute(PlayerAttributes.THEME) ?? DefaultThemeName;
-  }
-
-  /**
-   * Sets the theme.
-   */
-  set theme(val) {
-    this.setAttribute(PlayerAttributes.THEME, `${val}`);
-  }
-
-  /**
-   * Get the theme attributes in a plain object (camelCase keys).
-   * This doesn't include already defined attributes. e.g. streamType, disabled, etc.
-   */
-  get themeProps() {
-    const theme = this.mediaTheme;
-    if (!theme) return;
-
-    const props: Record<string, any> = {};
-
-    for (const name of theme.getAttributeNames()) {
-      if (ThemeAttributeNames.includes(name)) continue;
-
-      const value: string | boolean | null = theme.getAttribute(name);
-      props[camelCase(name)] = value === '' ? true : value;
-    }
-
-    return props;
-  }
-
-  /**
-   * Set the theme attributes via a plain object.
-   */
-  set themeProps(props) {
-    this.#init();
-
-    const themeProps = { ...this.themeProps, ...props };
-
-    for (const name in themeProps) {
-      if (ThemeAttributeNames.includes(name)) continue;
-
-      const value: string | boolean | null | undefined = props?.[name];
-
-      if (typeof value === 'boolean' || value == null) {
-        this.mediaTheme?.toggleAttribute(kebabCase(name), Boolean(value));
-      } else {
-        this.mediaTheme?.setAttribute(kebabCase(name), value);
-      }
-    }
-  }
-
-  /**
-   * Get Mux asset playback id.
-   */
-  get playbackId() {
-    // Don't get the mux-video attribute here because it could have the
-    // playback token appended to it.
-    return this.getAttribute(MuxVideoAttributes.PLAYBACK_ID) ?? undefined;
-  }
-
-  /**
-   * Set Mux asset playback id.
-   */
-  set playbackId(val) {
-    if (val) {
-      this.setAttribute(MuxVideoAttributes.PLAYBACK_ID, val);
-    } else {
-      this.removeAttribute(MuxVideoAttributes.PLAYBACK_ID);
-    }
-  }
-
-  /**
-   * Get the string that reflects the src HTML attribute, which contains the URL of a media resource to use.
-   */
-  get src() {
-    // Only get the internal video.src if a playbackId is present.
-    if (this.playbackId) {
-      return getVideoAttribute(this, VideoAttributes.SRC) ?? undefined;
-    }
-    return this.getAttribute(VideoAttributes.SRC) ?? undefined;
-  }
-
-  /**
-   * Set the string that reflects the src HTML attribute, which contains the URL of a media resource to use.
-   */
-  set src(val) {
-    if (val) {
-      this.setAttribute(VideoAttributes.SRC, val);
-    } else {
-      this.removeAttribute(VideoAttributes.SRC);
-    }
-  }
-
-  /**
-   * Gets a URL of an image to display, for example, like a movie poster. This can be a still frame from the video, or another image if no video data is available.
-   */
-  get poster() {
-    const val = this.getAttribute(VideoAttributes.POSTER);
-    if (val != null) return val;
-    // If a playback token but no thumbnail token is provided,
-    // assume a token is required for the thumbnail/poster URL and
-    // simply avoid requesting it in this case.
-    const { tokens } = this;
-    if (tokens.playback && !tokens.thumbnail) {
-      logger.warn('Missing expected thumbnail token. No poster image will be shown');
-      return undefined;
-    }
-
-    // Get the derived poster if a playbackId is present.
-    if (this.playbackId && !this.audio) {
-      return getPosterURLFromPlaybackId(this.playbackId, {
-        customDomain: this.customDomain,
-        thumbnailTime: this.thumbnailTime ?? this.startTime,
-        programTime: this.programStartTime,
-        token: tokens.thumbnail,
-      });
-    }
-
-    return undefined;
-  }
-
-  /**
-   * Sets a URL of an image to display, for example, like a movie poster. This can be a still frame from the video, or another image if no video data is available.
-   */
-  set poster(val) {
-    if (val || val === '') {
-      this.setAttribute(VideoAttributes.POSTER, val);
-    } else {
-      this.removeAttribute(VideoAttributes.POSTER);
-    }
-  }
-
-  /**
-   * Return the storyboard-src attribute URL
-   */
-  get storyboardSrc() {
-    return this.getAttribute(PlayerAttributes.STORYBOARD_SRC) ?? undefined;
-  }
-
-  /**
-   * Set the storyboard-src attribute URL
-   */
-  set storyboardSrc(src: string | undefined) {
-    if (!src) {
-      this.removeAttribute(PlayerAttributes.STORYBOARD_SRC);
-    } else {
-      this.setAttribute(PlayerAttributes.STORYBOARD_SRC, src);
-    }
-  }
-
-  /**
-   * Return the storyboard URL when a playback ID or storyboard-src is provided,
-   * we aren't an audio player and the stream-type isn't live.
-   */
-  get storyboard() {
-    const { tokens } = this;
-    // If the storyboardSrc has been explicitly set, assume it should be used
-    if (this.storyboardSrc && !tokens.storyboard) return this.storyboardSrc;
-    if (
-      // NOTE: Some audio use cases may have a storyboard (e.g. it's an audio+video stream being played *as* audio)
-      // Consider supporting cases (CJP)
-      this.audio ||
-      !this.playbackId ||
-      !this.streamType ||
-      [StreamTypes.LIVE, StreamTypes.UNKNOWN].includes(this.streamType as any) ||
-      // If a playback token but no storyboard token is provided,
-      // assume a token is required for the storyboard URL URL and
-      // simply avoid requesting it in this case.
-      (tokens.playback && !tokens.storyboard)
-    ) {
-      return undefined;
-    }
-    return getStoryboardURLFromPlaybackId(this.playbackId, {
-      customDomain: this.customDomain,
-      token: tokens.storyboard,
-      programStartTime: this.programStartTime,
-      programEndTime: this.programEndTime,
-    });
-  }
-
-  /**
-   * Gets the boolean indicator this is an audio player.
-   */
-  get audio() {
-    return this.hasAttribute(PlayerAttributes.AUDIO);
-  }
-
-  /**
-   * Sets the boolean indicator this is an audio player.
-   */
-  set audio(val: boolean) {
-    if (!val) {
-      this.removeAttribute(PlayerAttributes.AUDIO);
-      return;
-    }
-    this.setAttribute(PlayerAttributes.AUDIO, '');
-  }
-
-  get hotkeys() {
-    return this.#hotkeys;
-  }
-
-  get nohotkeys() {
-    return this.hasAttribute(PlayerAttributes.NOHOTKEYS);
-  }
-
-  set nohotkeys(val: boolean) {
-    if (!val) {
-      this.removeAttribute(PlayerAttributes.NOHOTKEYS);
-      return;
-    }
-    this.setAttribute(PlayerAttributes.NOHOTKEYS, '');
-  }
-
-  /**
-   * Get the thumbnailTime offset used for the poster image.
-   */
-  get thumbnailTime() {
-    return toNumberOrUndefined(this.getAttribute(PlayerAttributes.THUMBNAIL_TIME));
-  }
-
-  /**
-   * Set the thumbnailTime offset used for the poster image.
-   */
-  set thumbnailTime(val: number | undefined) {
-    this.setAttribute(PlayerAttributes.THUMBNAIL_TIME, `${val}`);
-  }
-
-  /**
-   * Get the video title shown in the player.
-   */
-  get videoTitle() {
-    return this.getAttribute(PlayerAttributes.VIDEO_TITLE) ?? this.getAttribute(PlayerAttributes.TITLE) ?? '';
-  }
-
-  /**
-   * Set the video title shown in the player.
-   */
-  set videoTitle(val: string) {
-    if (val === this.videoTitle) return;
-
-    if (!!val) {
-      this.setAttribute(PlayerAttributes.VIDEO_TITLE, val);
-    } else {
-      this.removeAttribute(PlayerAttributes.VIDEO_TITLE);
-    }
-  }
-
-  /**
-   * Gets the data URL of a placeholder image shown before the thumbnail is loaded.
-   */
-  get placeholder() {
-    return getVideoAttribute(this, PlayerAttributes.PLACEHOLDER) ?? '';
-  }
-
-  /**
-   * Sets the data URL of a placeholder image shown before the thumbnail is loaded.
-   */
-  set placeholder(val) {
-    this.setAttribute(PlayerAttributes.PLACEHOLDER, `${val}`);
-  }
-
-  /**
-   * Get the primary color used by the player.
-   */
-  get primaryColor() {
-    let color = this.getAttribute(PlayerAttributes.PRIMARY_COLOR);
-    if (color != null) return color;
-
-    // Fallback to computed style if no attribute is set, causes layout.
-    // https://gist.github.com/paulirish/5d52fb081b3570c81e3a
-    if (this.mediaTheme) {
-      color = globalThis.getComputedStyle(this.mediaTheme)?.getPropertyValue('--_primary-color')?.trim();
-      if (color) return color;
-    }
-  }
-
-  /**
-   * Set the primary color used by the player.
-   */
-  set primaryColor(val: string | undefined) {
-    this.setAttribute(PlayerAttributes.PRIMARY_COLOR, `${val}`);
-  }
-
-  /**
-   * Get the secondary color used by the player.
-   */
-  get secondaryColor() {
-    let color = this.getAttribute(PlayerAttributes.SECONDARY_COLOR);
-    if (color != null) return color;
-
-    // Fallback to computed style if no attribute is set, causes layout.
-    // https://gist.github.com/paulirish/5d52fb081b3570c81e3a
-    if (this.mediaTheme) {
-      color = globalThis.getComputedStyle(this.mediaTheme)?.getPropertyValue('--_secondary-color')?.trim();
-      if (color) return color;
-    }
-  }
-
-  /**
-   * Set the secondary color used by the player.
-   */
-  set secondaryColor(val: string | undefined) {
-    this.setAttribute(PlayerAttributes.SECONDARY_COLOR, `${val}`);
-  }
-
-  /**
-   * Get the accent color used by the player.
-   */
-  get accentColor() {
-    let color = this.getAttribute(PlayerAttributes.ACCENT_COLOR);
-    if (color != null) return color;
-
-    // Fallback to computed style if no attribute is set, causes layout.
-    // https://gist.github.com/paulirish/5d52fb081b3570c81e3a
-    if (this.mediaTheme) {
-      color = globalThis.getComputedStyle(this.mediaTheme)?.getPropertyValue('--_accent-color')?.trim();
-      if (color) return color;
-    }
-  }
-
-  /**
-   * Set the accent color used by the player.
-   */
-  set accentColor(val: string | undefined) {
-    this.setAttribute(PlayerAttributes.ACCENT_COLOR, `${val}`);
-  }
-
-  get defaultShowRemainingTime() {
-    return this.hasAttribute(PlayerAttributes.DEFAULT_SHOW_REMAINING_TIME);
-  }
-
-  set defaultShowRemainingTime(val: boolean | undefined) {
-    if (!val) {
-      this.removeAttribute(PlayerAttributes.DEFAULT_SHOW_REMAINING_TIME);
-    } else {
-      this.setAttribute(PlayerAttributes.DEFAULT_SHOW_REMAINING_TIME, '');
-    }
-  }
-
-  /**
-   * Get the playback rates applied to the playback rate control.
-   */
-  get playbackRates() {
-    if (!this.hasAttribute(PlayerAttributes.PLAYBACK_RATES)) return undefined;
-    // /NOTE: This is duplicating the code from Media Chrome's media-playback-rate-button (CJP)
-    return (this.getAttribute(PlayerAttributes.PLAYBACK_RATES) as string)
-      .trim()
-      .split(/\s*,?\s+/)
-      .map((str) => Number(str))
-      .filter((num) => !Number.isNaN(num))
-      .sort((a, b) => a - b);
-  }
-
-  /**
-   * Set the playback rates applied to the playback rate control.
-   */
-  set playbackRates(val: number[] | undefined) {
-    if (!val) {
-      this.removeAttribute(PlayerAttributes.PLAYBACK_RATES);
-      return;
-    }
-    this.setAttribute(PlayerAttributes.PLAYBACK_RATES, val.join(' '));
-  }
-
-  /**
-   * Get the offset applied to the forward seek button.
-   */
-  get forwardSeekOffset() {
-    return toNumberOrUndefined(this.getAttribute(PlayerAttributes.FORWARD_SEEK_OFFSET)) ?? 10;
-  }
-
-  /**
-   * Set the offset applied to the forward seek button.
-   */
-  set forwardSeekOffset(val: number | undefined) {
-    this.setAttribute(PlayerAttributes.FORWARD_SEEK_OFFSET, `${val}`);
-  }
-
-  /**
-   * Get the offset applied to the backward seek button.
-   */
-  get backwardSeekOffset() {
-    return toNumberOrUndefined(this.getAttribute(PlayerAttributes.BACKWARD_SEEK_OFFSET)) ?? 10;
-  }
-
-  /**
-   * Set the offset applied to the forward seek button.
-   */
-  set backwardSeekOffset(val: number | undefined) {
-    this.setAttribute(PlayerAttributes.BACKWARD_SEEK_OFFSET, `${val}`);
-  }
-
-  /**
-   * Get the boolean value of default hidden captions.
-   * By default returns false so captions are enabled on initial load.
-   */
-  get defaultHiddenCaptions() {
-    return this.hasAttribute(PlayerAttributes.DEFAULT_HIDDEN_CAPTIONS);
-  }
-
-  /**
-   * Set the default hidden captions flag.
-   */
-  set defaultHiddenCaptions(val: boolean | undefined) {
-    if (!val) {
-      this.removeAttribute(PlayerAttributes.DEFAULT_HIDDEN_CAPTIONS);
-    } else {
-      this.setAttribute(PlayerAttributes.DEFAULT_HIDDEN_CAPTIONS, '');
-    }
-  }
-
-  /**
-   * Get the boolean value of default hidden captions.
-   * By default returns false so captions are enabled on initial load.
-   */
-  get defaultDuration() {
-    return toNumberOrUndefined(this.getAttribute(PlayerAttributes.DEFAULT_DURATION));
-  }
-
-  /**
-   * Set the default hidden captions flag.
-   */
-  set defaultDuration(val: number | undefined) {
-    if (val == undefined) {
-      this.removeAttribute(PlayerAttributes.DEFAULT_DURATION);
-    } else {
-      this.setAttribute(PlayerAttributes.DEFAULT_DURATION, `${val}`);
-    }
-  }
-
-  get playerInitTime() {
-    if (!this.hasAttribute(MuxVideoAttributes.PLAYER_INIT_TIME)) return this.#defaultPlayerInitTime;
-    return toNumberOrUndefined(this.getAttribute(MuxVideoAttributes.PLAYER_INIT_TIME));
-  }
-
-  set playerInitTime(val) {
-    // don't cause an infinite loop and avoid change event dispatching
-    if (val == this.playerInitTime) return;
-
-    if (val == null) {
-      this.removeAttribute(MuxVideoAttributes.PLAYER_INIT_TIME);
-    } else {
-      this.setAttribute(MuxVideoAttributes.PLAYER_INIT_TIME, `${+val}`);
-    }
-  }
-
-  /**
-   * Get the player software name. Used by Mux Data.
-   */
-  get playerSoftwareName() {
-    return this.getAttribute(MuxVideoAttributes.PLAYER_SOFTWARE_NAME) ?? playerSoftwareName;
-  }
-
-  /**
-   * Get the player software version. Used by Mux Data.
-   */
-  get playerSoftwareVersion() {
-    return this.getAttribute(MuxVideoAttributes.PLAYER_SOFTWARE_VERSION) ?? playerSoftwareVersion;
-  }
-
-  /**
-   * Get the beacon collection domain. Used by Mux Data.
-   */
-  get beaconCollectionDomain() {
-    return this.getAttribute(MuxVideoAttributes.BEACON_COLLECTION_DOMAIN) ?? undefined;
-  }
-
-  /**
-   * Set the beacon collection domain. Used by Mux Data.
-   */
-  set beaconCollectionDomain(val: string | undefined) {
-    // don't cause an infinite loop
-    if (val === this.beaconCollectionDomain) return;
-
-    if (val) {
-      this.setAttribute(MuxVideoAttributes.BEACON_COLLECTION_DOMAIN, val);
-    } else {
-      this.removeAttribute(MuxVideoAttributes.BEACON_COLLECTION_DOMAIN);
-    }
-  }
-
-  get maxResolution() {
-    return (this.getAttribute(MuxVideoAttributes.MAX_RESOLUTION) as MaxResolutionValue) ?? undefined;
-  }
-
-  set maxResolution(val: MaxResolutionValue | undefined) {
-    if (val === this.maxResolution) return;
-
-    if (val) {
-      this.setAttribute(MuxVideoAttributes.MAX_RESOLUTION, val);
-    } else {
-      this.removeAttribute(MuxVideoAttributes.MAX_RESOLUTION);
-    }
-  }
-
-  get minResolution() {
-    return (this.getAttribute(MuxVideoAttributes.MIN_RESOLUTION) as MinResolutionValue) ?? undefined;
-  }
-
-  set minResolution(val: MinResolutionValue | undefined) {
-    if (val === this.minResolution) return;
-
-    if (val) {
-      this.setAttribute(MuxVideoAttributes.MIN_RESOLUTION, val);
-    } else {
-      this.removeAttribute(MuxVideoAttributes.MIN_RESOLUTION);
-    }
-  }
-
-  get renditionOrder() {
-    return (this.getAttribute(MuxVideoAttributes.RENDITION_ORDER) as RenditionOrderValue) ?? undefined;
-  }
-
-  set renditionOrder(val: RenditionOrderValue | undefined) {
-    if (val === this.renditionOrder) return;
-
-    if (val) {
-      this.setAttribute(MuxVideoAttributes.RENDITION_ORDER, val);
-    } else {
-      this.removeAttribute(MuxVideoAttributes.RENDITION_ORDER);
-    }
-  }
-
-  get programStartTime() {
-    return toNumberOrUndefined(this.getAttribute(MuxVideoAttributes.PROGRAM_START_TIME));
-  }
-
-  set programStartTime(val: number | undefined) {
-    if (val == undefined) {
-      this.removeAttribute(MuxVideoAttributes.PROGRAM_START_TIME);
-    } else {
-      this.setAttribute(MuxVideoAttributes.PROGRAM_START_TIME, `${val}`);
-    }
-  }
-
-  get programEndTime() {
-    return toNumberOrUndefined(this.getAttribute(MuxVideoAttributes.PROGRAM_END_TIME));
-  }
-
-  set programEndTime(val: number | undefined) {
-    if (val == undefined) {
-      this.removeAttribute(MuxVideoAttributes.PROGRAM_END_TIME);
-    } else {
-      this.setAttribute(MuxVideoAttributes.PROGRAM_END_TIME, `${val}`);
-    }
-  }
-
-  get assetStartTime() {
-    return toNumberOrUndefined(this.getAttribute(MuxVideoAttributes.ASSET_START_TIME));
-  }
-
-  set assetStartTime(val: number | undefined) {
-    if (val == undefined) {
-      this.removeAttribute(MuxVideoAttributes.ASSET_START_TIME);
-    } else {
-      this.setAttribute(MuxVideoAttributes.ASSET_START_TIME, `${val}`);
-    }
-  }
-
-  get assetEndTime() {
-    return toNumberOrUndefined(this.getAttribute(MuxVideoAttributes.ASSET_END_TIME));
-  }
-
-  set assetEndTime(val: number | undefined) {
-    if (val == undefined) {
-      this.removeAttribute(MuxVideoAttributes.ASSET_END_TIME);
-    } else {
-      this.setAttribute(MuxVideoAttributes.ASSET_END_TIME, `${val}`);
-    }
-  }
-
-  get extraSourceParams() {
-    if (!this.hasAttribute(PlayerAttributes.EXTRA_SOURCE_PARAMS)) {
-      return DEFAULT_EXTRA_PLAYLIST_PARAMS;
-    }
-
-    return [...new URLSearchParams(this.getAttribute(PlayerAttributes.EXTRA_SOURCE_PARAMS) as string).entries()].reduce(
-      (paramsObj, [k, v]) => {
-        paramsObj[k] = v;
-        return paramsObj;
-      },
-      {} as Record<string, any>
-    );
-  }
-
-  set extraSourceParams(value: Record<string, any>) {
-    if (value == null) {
-      this.removeAttribute(PlayerAttributes.EXTRA_SOURCE_PARAMS);
-    } else {
-      this.setAttribute(PlayerAttributes.EXTRA_SOURCE_PARAMS, new URLSearchParams(value).toString());
-    }
-  }
-
-  /**
-   * Get Mux asset custom domain.
-   */
-  get customDomain() {
-    return this.getAttribute(MuxVideoAttributes.CUSTOM_DOMAIN) ?? undefined;
-  }
-
-  /**
-   * Set Mux asset custom domain.
-   */
-  set customDomain(val: string | undefined) {
-    // dont' cause an infinite loop
-    if (val === this.customDomain) return;
-
-    if (val) {
-      this.setAttribute(MuxVideoAttributes.CUSTOM_DOMAIN, val);
-    } else {
-      this.removeAttribute(MuxVideoAttributes.CUSTOM_DOMAIN);
-    }
-  }
-
-  /**
-   * Get Mux Data env key.
-   */
-  get envKey() {
-    return getVideoAttribute(this, MuxVideoAttributes.ENV_KEY) ?? undefined;
-  }
-
-  /**
-   * Set Mux Data env key.
-   */
-  set envKey(val: string | undefined) {
-    this.setAttribute(MuxVideoAttributes.ENV_KEY, `${val}`);
-  }
-
-  /**
-   * Get no-volume-pref flag.
-   */
-  get noVolumePref() {
-    return this.hasAttribute(PlayerAttributes.NO_VOLUME_PREF);
-  }
-
-  /**
-   * Set video engine debug flag.
-   */
-  set noVolumePref(val) {
-    if (val) {
-      this.setAttribute(PlayerAttributes.NO_VOLUME_PREF, '');
-    } else {
-      this.removeAttribute(PlayerAttributes.NO_VOLUME_PREF);
-    }
-  }
-
-  /**
-   * Get video engine debug flag.
-   */
-  get debug() {
-    return getVideoAttribute(this, MuxVideoAttributes.DEBUG) != null;
-  }
-
-  /**
-   * Set video engine debug flag.
-   */
-  set debug(val) {
-    if (val) {
-      this.setAttribute(MuxVideoAttributes.DEBUG, '');
-    } else {
-      this.removeAttribute(MuxVideoAttributes.DEBUG);
-    }
-  }
-
-  /**
-   * Get video engine disable tracking flag.
-   */
-  get disableTracking() {
-    return getVideoAttribute(this, MuxVideoAttributes.DISABLE_TRACKING) != null;
-  }
-
-  /**
-   * Set video engine disable tracking flag.
-   */
-  set disableTracking(val) {
-    this.toggleAttribute(MuxVideoAttributes.DISABLE_TRACKING, !!val);
-  }
-
-  /**
-   * Get video engine disable cookies flag.
-   */
-  get disableCookies() {
-    return getVideoAttribute(this, MuxVideoAttributes.DISABLE_COOKIES) != null;
-  }
-
-  /**
-   * Set video engine disable cookies flag.
-   */
-  set disableCookies(val) {
-    if (val) {
-      this.setAttribute(MuxVideoAttributes.DISABLE_COOKIES, '');
-    } else {
-      this.removeAttribute(MuxVideoAttributes.DISABLE_COOKIES);
-    }
-  }
-
-  /**
-   * Get stream type.
-   */
-  get streamType() {
-    return this.getAttribute(MuxVideoAttributes.STREAM_TYPE) ?? this.media?.streamType ?? StreamTypes.UNKNOWN;
-  }
-
-  /**
-   * Set stream type.
-   */
-  set streamType(val) {
-    this.setAttribute(MuxVideoAttributes.STREAM_TYPE, `${val}`);
-  }
-
-  get defaultStreamType() {
-    return (
-      (this.getAttribute(PlayerAttributes.DEFAULT_STREAM_TYPE) as ValueOf<StreamTypes>) ??
-      (this.mediaController?.getAttribute(PlayerAttributes.DEFAULT_STREAM_TYPE) as ValueOf<StreamTypes>) ??
-      StreamTypes.ON_DEMAND
-    );
-  }
-
-  set defaultStreamType(val: ValueOf<StreamTypes> | undefined) {
-    if (val) {
-      this.setAttribute(PlayerAttributes.DEFAULT_STREAM_TYPE, val);
-    } else {
-      this.removeAttribute(PlayerAttributes.DEFAULT_STREAM_TYPE);
-    }
-  }
-
-  get targetLiveWindow() {
-    // Allow overriding inferred `targetLiveWindow`
-    if (this.hasAttribute(PlayerAttributes.TARGET_LIVE_WINDOW)) {
-      return +(this.getAttribute(PlayerAttributes.TARGET_LIVE_WINDOW) as string) as number;
-    }
-    return this.media?.targetLiveWindow ?? Number.NaN;
-  }
-
-  set targetLiveWindow(val: number | undefined) {
-    // don't cause an infinite loop and avoid change event dispatching
-    if (val == this.targetLiveWindow || (Number.isNaN(val) && Number.isNaN(this.targetLiveWindow))) return;
-
-    if (val == null) {
-      this.removeAttribute(PlayerAttributes.TARGET_LIVE_WINDOW);
-    } else {
-      this.setAttribute(PlayerAttributes.TARGET_LIVE_WINDOW, `${+val}`);
-    }
-  }
-
-  get liveEdgeStart() {
-    return this.media?.liveEdgeStart;
-  }
-
-  /**
-   * Get the start time.
-   */
-  get startTime() {
-    return toNumberOrUndefined(getVideoAttribute(this, MuxVideoAttributes.START_TIME));
-  }
-
-  /**
-   * Set the start time.
-   */
-  set startTime(val) {
-    this.setAttribute(MuxVideoAttributes.START_TIME, `${val}`);
-  }
-
-  get preferPlayback(): ValueOf<PlaybackTypes> | undefined {
-    const val = this.getAttribute(MuxVideoAttributes.PREFER_PLAYBACK);
-    if (val === PlaybackTypes.MSE || val === PlaybackTypes.NATIVE) return val;
-    return undefined;
-  }
-
-  set preferPlayback(val: ValueOf<PlaybackTypes> | undefined) {
-    if (val === this.preferPlayback) return;
-
-    if (val === PlaybackTypes.MSE || val === PlaybackTypes.NATIVE) {
-      this.setAttribute(MuxVideoAttributes.PREFER_PLAYBACK, val);
-    } else {
-      this.removeAttribute(MuxVideoAttributes.PREFER_PLAYBACK);
-    }
-  }
-
-  /**
-   * Get the metadata object for Mux Data.
-   */
-  get metadata(): Readonly<Metadata> | undefined {
-    return this.media?.metadata;
-  }
-
-  /**
-   * Set the metadata object for Mux Data.
-   */
-  set metadata(val: Readonly<Metadata> | undefined) {
-    this.#init();
-
-    // NOTE: This condition should never be met. If it is, there is a bug (CJP)
-    if (!this.media) {
-      logger.error('underlying media element missing when trying to set metadata. metadata will not be set.');
-      return;
-    }
-    this.media.metadata = { ...getMetadataFromAttrs(this), ...val };
-  }
-
-  /**
-   * Get the metadata object for Mux Data.
-   */
-  get _hlsConfig() {
-    return this.media?._hlsConfig;
-  }
-
-  /**
-   * Set the metadata object for Mux Data.
-   */
-  set _hlsConfig(val: Readonly<Partial<HlsConfig>> | undefined) {
-    this.#init();
-
-    // NOTE: This condition should never be met. If it is, there is a bug (CJP)
-    if (!this.media) {
-      logger.error('underlying media element missing when trying to set _hlsConfig. _hlsConfig will not be set.');
-      return;
-    }
-    this.media._hlsConfig = val;
-  }
-
-  async addCuePoints<T = any>(cuePoints: CuePoint<T>[]) {
-    this.#init();
-
-    // NOTE: This condition should never be met. If it is, there is a bug (CJP)
-    if (!this.media) {
-      logger.error('underlying media element missing when trying to addCuePoints. cuePoints will not be added.');
-      return;
-    }
-    return this.media?.addCuePoints(cuePoints);
-  }
-
-  get activeCuePoint() {
-    return this.media?.activeCuePoint;
-  }
-
-  get cuePoints() {
-    return this.media?.cuePoints ?? [];
-  }
-
-  addChapters(chapters: Chapter[]) {
-    this.#init();
-
-    // NOTE: This condition should never be met. If it is, there is a bug (CJP)
-    if (!this.media) {
-      logger.error('underlying media element missing when trying to addChapters. chapters will not be added.');
-      return;
-    }
-
-    return this.media?.addChapters(chapters);
-  }
-
-  get activeChapter() {
-    return this.media?.activeChapter;
-  }
-
-  get chapters() {
-    return this.media?.chapters ?? [];
-  }
-
-  getStartDate() {
-    return this.media?.getStartDate();
-  }
-
-  get currentPdt() {
-    return this.media?.currentPdt;
-  }
-
-  /**
-   * Get the signing tokens for the Mux asset URL's.
-   */
-  get tokens(): Tokens {
-    const playback = this.getAttribute(PlayerAttributes.PLAYBACK_TOKEN);
-    const drm = this.getAttribute(PlayerAttributes.DRM_TOKEN);
-    const thumbnail = this.getAttribute(PlayerAttributes.THUMBNAIL_TOKEN);
-    const storyboard = this.getAttribute(PlayerAttributes.STORYBOARD_TOKEN);
-    return {
-      ...this.#tokens,
-      ...(playback != null ? { playback } : {}),
-      ...(drm != null ? { drm } : {}),
-      ...(thumbnail != null ? { thumbnail } : {}),
-      ...(storyboard != null ? { storyboard } : {}),
-    };
-  }
-
-  /**
-   * Set the signing tokens for the Mux asset URL's.
-   */
-  set tokens(val: Tokens | undefined) {
-    this.#tokens = val ?? {};
-  }
-
-  /**
-   * Get the playback token for signing the src URL.
-   */
-  get playbackToken() {
-    return this.getAttribute(PlayerAttributes.PLAYBACK_TOKEN) ?? undefined;
-  }
-
-  /**
-   * Set the playback token for signing the src URL.
-   */
-  set playbackToken(val) {
-    this.setAttribute(PlayerAttributes.PLAYBACK_TOKEN, `${val}`);
-  }
-
-  /**
-   * Get the playback token for signing the src URL.
-   */
-  get drmToken() {
-    return this.getAttribute(PlayerAttributes.DRM_TOKEN) ?? undefined;
-  }
-
-  /**
-   * Set the playback token for signing the src URL.
-   */
-  set drmToken(val) {
-    this.setAttribute(PlayerAttributes.DRM_TOKEN, `${val}`);
-  }
-
-  /**
-   * Get the thumbnail token for signing the poster URL.
-   */
-  get thumbnailToken() {
-    return this.getAttribute(PlayerAttributes.THUMBNAIL_TOKEN) ?? undefined;
-  }
-
-  /**
-   * Set the thumbnail token for signing the poster URL.
-   */
-  set thumbnailToken(val) {
-    this.setAttribute(PlayerAttributes.THUMBNAIL_TOKEN, `${val}`);
-  }
-
-  /**
-   * Get the storyboard token for signing the storyboard URL.
-   */
-  get storyboardToken() {
-    return this.getAttribute(PlayerAttributes.STORYBOARD_TOKEN) ?? undefined;
-  }
-
-  /**
-   * Set the storyboard token for signing the storyboard URL.
-   */
-  set storyboardToken(val) {
-    this.setAttribute(PlayerAttributes.STORYBOARD_TOKEN, `${val}`);
-  }
-
-  addTextTrack(kind: TextTrackKind, label: string, lang?: string, id?: string) {
-    const mediaEl = this.media?.nativeEl;
-    if (!mediaEl) return;
-    return addTextTrack(mediaEl, kind, label, lang, id);
-  }
-
-  removeTextTrack(track: TextTrack) {
-    const mediaEl = this.media?.nativeEl;
-    if (!mediaEl) return;
-    return removeTextTrack(mediaEl, track);
-  }
-
-  get textTracks() {
-    return this.media?.textTracks;
-  }
-
-  get castReceiver(): string | undefined {
-    return this.getAttribute(PlayerAttributes.CAST_RECEIVER) ?? undefined;
-  }
-
-  set castReceiver(val: string | undefined) {
-    if (val === this.castReceiver) return;
-    if (val) {
-      this.setAttribute(PlayerAttributes.CAST_RECEIVER, val);
-    } else {
-      this.removeAttribute(PlayerAttributes.CAST_RECEIVER);
-    }
-  }
-
-  get castCustomData() {
-    return this.media?.castCustomData;
-  }
-
-  set castCustomData(val) {
-    // NOTE: This condition should never be met. If it is, there is a bug (CJP)
-    if (!this.media) {
-      logger.error(
-        'underlying media element missing when trying to set castCustomData. castCustomData will not be set.'
-      );
-      return;
-    }
-    this.media.castCustomData = val;
-  }
-
-  get noTooltips() {
-    return this.hasAttribute(PlayerAttributes.NO_TOOLTIPS);
-  }
-
-  set noTooltips(val: boolean) {
-    if (!val) {
-      this.removeAttribute(PlayerAttributes.NO_TOOLTIPS);
-      return;
-    }
-    this.setAttribute(PlayerAttributes.NO_TOOLTIPS, '');
-  }
-
-  get proudlyDisplayMuxBadge() {
-    return this.hasAttribute(PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE);
-  }
-
-  set proudlyDisplayMuxBadge(val: boolean) {
-    if (!val) {
-      this.removeAttribute(PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE);
-    } else {
-      this.setAttribute(PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE, '');
-    }
-  }
-}
-
-export function getVideoAttribute(el: MuxPlayerElement, name: string) {
-  return el.media ? el.media.getAttribute(name) : el.getAttribute(name);
-}
-
-/** @TODO Refactor once using `globalThis` polyfills */
 if (!globalThis.customElements.get('mux-player')) {
   globalThis.customElements.define('mux-player', MuxPlayerElement);
-  /** @TODO consider externalizing this (breaks standard modularity) */
   (globalThis as any).MuxPlayerElement = MuxPlayerElement;
 }
 
+export * from '@mux/mux-player/base';
 export default MuxPlayerElement;
diff --git a/packages/mux-player/src/themes/news/index.ts b/packages/mux-player/src/themes/news/index.ts
new file mode 100644
index 000000000..dfaf12fd8
--- /dev/null
+++ b/packages/mux-player/src/themes/news/index.ts
@@ -0,0 +1,18 @@
+// @ts-ignore
+import theme from './news.html';
+import { document, globalThis } from '../../polyfills';
+import { MediaThemeElement } from 'media-chrome/dist/media-theme-element.js';
+import 'media-chrome/dist/menu';
+
+const template = document.createElement('template');
+if ('innerHTML' in template) template.innerHTML = theme;
+
+class MediaThemeNews extends MediaThemeElement {
+  static template = template.content?.children?.[0] as HTMLTemplateElement;
+}
+
+if (!globalThis.customElements.get('media-theme-news')) {
+  globalThis.customElements.define('media-theme-news', MediaThemeNews);
+}
+
+export default MediaThemeNews;
diff --git a/packages/mux-player/src/themes/news/news.html b/packages/mux-player/src/themes/news/news.html
new file mode 100644
index 000000000..9bb026c6c
--- /dev/null
+++ b/packages/mux-player/src/themes/news/news.html
@@ -0,0 +1,565 @@
+<template id="media-theme-news">
+  <style>
+    media-controller {
+      font-size: 13px;
+      font-family: Roboto, Arial, sans-serif;
+      --media-font-family: Roboto, helvetica neue, segoe ui, arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      --media-secondary-color: transparent;
+      --media-menu-background: rgba(28, 28, 28, 0.9);
+      --media-control-hover-background: var(--media-secondary-color);
+      --media-range-track-height: 3px;
+      --media-range-thumb-height: 13px;
+      --media-range-thumb-width: 13px;
+      --media-range-thumb-border-radius: 13px;
+      --media-preview-thumbnail-border: 2px solid #fff;
+      --media-preview-thumbnail-border-radius: 2px;
+      --media-tooltip-display: none;
+    }
+
+    /* The biggest size controller is tied to going fullscreen
+      instead of a player width */
+    media-controller[mediaisfullscreen] {
+      font-size: 17px;
+      --media-range-thumb-height: 20px;
+      --media-range-thumb-width: 20px;
+      --media-range-thumb-border-radius: 10px;
+      --media-range-track-height: 4px;
+    }
+
+    .nw-button {
+      position: relative;
+      display: inline-block;
+      width: 36px;
+      padding: 0 2px;
+      height: 100%;
+      opacity: 0.9;
+      transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);
+    }
+    [breakpointmd] .nw-button {
+      width: 48px;
+    }
+    [mediaisfullscreen] .nw-button {
+      width: 54px;
+    }
+
+    .nw-button svg {
+      height: 100%;
+      width: 100%;
+      fill: var(--media-primary-color, #fff);
+      fill-rule: evenodd;
+    }
+
+    .svg-shadow {
+      stroke: #000;
+      stroke-opacity: 0.15;
+      stroke-width: 2px;
+      fill: none;
+    }
+  </style>
+
+  <media-controller
+    breakpoints="md:480"
+    defaultsubtitles="{{defaultsubtitles}}"
+    defaultduration="{{defaultduration}}"
+    gesturesdisabled="{{disabled}}"
+    hotkeys="{{hotkeys}}"
+    nohotkeys="{{nohotkeys}}"
+    mediaadbreak="{{mediaadbreak}}"
+    part="controller"
+  >
+    <slot name="media" slot="media"></slot>
+    <slot name="poster" slot="poster"></slot>
+    <media-error-dialog slot="dialog"></media-error-dialog>
+
+    <!-- Gradient -->
+    <style>
+      .nw-gradient-bottom {
+        padding-top: 37px;
+        position: absolute;
+        width: 100%;
+        height: 170px;
+        bottom: 0;
+        z-index: 2;
+        pointer-events: none;
+        background-position: bottom;
+        background-repeat: repeat-x;
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACqCAYAAABsziWkAAAAAXNSR0IArs4c6QAAAQVJREFUOE9lyNdHBQAAhfHb3nvvuu2997jNe29TJJEkkkgSSSSJJJJEEkkiifRH5jsP56Xz8PM5gcC/xfDEmjhKxEOCSaREEiSbFEqkQppJpzJMJiWyINvkUCIX8kw+JQqg0BRRxaaEEqVQZsopUQGVpooS1VBjglStqaNEPTSYRko0QbNpoUQrtJl2qsN0UqILuk0PJXqhz/RTYgAGzRA1bEYoMQpjZpwSExAyk5SYgmkzQ82aOUqEIWKilJiHBbNIiSVYhhVYhTVYhw3YhC3Yhh3YhT3YhwM4hCM4hhM4hTM4hwu4hCu4hhu4hTu4hwd4hCd4hhd4hTd4hw/4hC/4hh/4/QM2/id28uIEJAAAAABJRU5ErkJggg==');
+      }
+    </style>
+    <div class="nw-gradient-bottom"></div>
+
+    <!-- Rendition Menu -->
+    <style>
+      media-rendition-menu,
+      media-captions-menu {
+        position: absolute;
+        border-radius: 0.3rem;
+        right: 12px;
+        bottom: 61px;
+        z-index: 70;
+        will-change: width, height;
+        text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+        transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1);
+        user-select: none;
+        --media-settings-menu-min-width: 220px;
+        --media-menu-item-checked-background: #f72210;
+        --media-menu-item-checked-indicator-display: none;
+        font-weight: 500;
+      }
+
+      [mediaisfullscreen] media-rendition-menu {
+        --media-settings-menu-min-width: 320px;
+        right: 24px;
+        bottom: 70px;
+      }
+      media-chrome-menu-item {
+        height: 40px;
+        font-size: 13px;
+        font-weight: 500;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      [mediaisfullscreen] media-settings-menu-item {
+        font-size: 20px;
+        height: 50px;
+      }
+
+      media-settings-menu-item[submenusize='0'] {
+        display: none;
+      }
+
+      /* Also hide if only 'Auto' is added. */
+      .quality-settings[submenusize='1'] {
+        display: none;
+      }
+    </style>
+
+    <media-rendition-menu anchor="auto" hidden> </media-rendition-menu>
+    <media-captions-menu hidden anchor="auto"></media-captions-menu>
+    <!-- Time Range / Progress Bar -->
+
+    <style>
+      media-play-button[slot='centered-chrome'] {
+        display: grid;
+        grid-template-columns: 1.5rem auto;
+        align-items: center;
+        gap: 1.2rem;
+        background: #000;
+        border-radius: 2rem;
+        opacity: 1;
+        padding: 1rem;
+        font-size: 1.3rem;
+        font-weight: 400;
+        text-transform: uppercase;
+        margin: 0;
+      }
+
+      media-play-button[slot='centered-chrome'] {
+        display: none;
+      }
+
+      media-play-button[slot='centered-chrome'][mediapaused] {
+        display: block;
+        line-height: 1;
+        color: white;
+      }
+
+      media-play-button[slot='centered-chrome'][mediapaused]:hover {
+        color: #f72210;
+      }
+
+      media-play-button[slot='centered-chrome'] p {
+        margin: 0;
+        align-items: center;
+        display: flex;
+        gap: 0.25rem;
+      }
+
+      media-play-button[slot='centered-chrome'] svg {
+        width: 1.8rem;
+        height: auto;
+      }
+
+      media-play-button[slot='centered-chrome'] media-duration-display {
+        display: none;
+        font-size: 1.3rem;
+      }
+
+      media-controller[mediacurrenttime='0'] media-duration-display {
+        display: block;
+        color: inherit;
+        padding: 0 0.3rem;
+      }
+
+      media-controller:not([mediacurrenttime='0']) media-duration-display {
+        display: none;
+      }
+
+      media-controller[mediacurrenttime='0'] media-play-button[slot='centered-chrome'] span {
+        display: none;
+      }
+    </style>
+
+    <media-play-button slot="centered-chrome">
+      <p slot="play">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18ZM10 0C8.68678 0 7.38642 0.258658 6.17317 0.761205C4.95991 1.26375 3.85752 2.00035 2.92893 2.92893C1.05357 4.8043 0 7.34784 0 10C0 12.6522 1.05357 15.1957 2.92893 17.0711C3.85752 17.9997 4.95991 18.7362 6.17317 19.2388C7.38642 19.7413 8.68678 20 10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C18.9464 15.1957 20 12.6522 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7362 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0ZM8 14.5L14 10L8 5.5V14.5Z"
+            fill="currentColor"
+          />
+        </svg>
+
+        <span>Continue</span>
+        <media-duration-display></media-duration-display>
+      </p>
+    </media-play-button>
+
+    <!-- Time Range / Progress Bar -->
+    <style>
+      media-time-range {
+        position: absolute;
+        bottom: 36px;
+        width: 100%;
+        height: 5px;
+        z-index: 2;
+        --media-range-track-background: rgba(255, 255, 255, 0.2);
+        --media-range-track-pointer-background: rgba(255, 255, 255, 0.5);
+        --media-time-range-buffered-color: rgba(255, 255, 255, 0.4);
+        --media-range-bar-color: var(--media-accent-color, #f72210);
+        --media-range-thumb-border-radius: 13px;
+        --media-range-thumb-background: var(--media-accent-color, #f72210);
+        --media-range-thumb-transition: transform 0.1s linear;
+        --media-range-thumb-transform: scale(0) translate(0%, 0%);
+      }
+      media-time-range:hover {
+        --media-range-track-height: 5px;
+        --media-range-thumb-transform: scale(1) translate(0%, 0%);
+      }
+      [breakpointmd] media-time-range {
+        bottom: 47px;
+      }
+      [mediaisfullscreen] media-time-range {
+        bottom: 52.5px;
+        height: 8px;
+      }
+      [mediaisfullscreen] media-time-range:hover {
+        --media-range-track-height: 8px;
+      }
+
+      media-preview-thumbnail {
+        margin-bottom: 5px;
+      }
+
+      media-preview-chapter-display {
+        padding-block: 0;
+      }
+
+      media-preview-time-display {
+        padding-top: 0;
+        background: #d8d8d8;
+        color: black;
+        padding: 0.25rem 0.5rem;
+        text-shadow: none;
+        display: block !important;
+        opacity: 1;
+        margin-bottom: 1rem;
+      }
+    </style>
+    <media-time-range>
+      <media-preview-thumbnail slot="preview"></media-preview-thumbnail>
+      <media-preview-chapter-display slot="preview"></media-preview-chapter-display>
+      <media-preview-time-display slot="preview"></media-preview-time-display>
+    </media-time-range>
+
+    <!-- Control Bar -->
+    <style>
+      media-control-bar {
+        position: absolute;
+        height: 36px;
+        line-height: 36px;
+        bottom: 0;
+        left: 12px;
+        right: 12px;
+        z-index: 3;
+      }
+      [breakpointmd] media-control-bar {
+        height: 48px;
+        line-height: 48px;
+      }
+      [mediaisfullscreen] media-control-bar {
+        height: 54px;
+        line-height: 54px;
+      }
+    </style>
+    <media-control-bar>
+      <!-- Play/Pause -->
+      <style>
+        media-play-button {
+          --media-button-icon-width: 30px;
+          padding: 6px 10px;
+        }
+
+        media-play-button :is(#play-p1, #play-p2, #pause-p1, #pause-p2) {
+          transition: clip-path 0.25s ease-in;
+        }
+
+        /* Slow down the play icon part hiding slightly
+          to achieve the morphing look a little better */
+        media-play-button:not([mediapaused]) #play-p2,
+        media-play-button:not([mediapaused]) #play-p2 {
+          transition: clip-path 0.35s ease-in;
+        }
+
+        /* Show icon */
+        media-play-button :is(#pause-p1, #pause-p2),
+        media-play-button[mediapaused] :is(#play-p1, #play-p2) {
+          clip-path: inset(0);
+        }
+
+        /* Hide icon wth clip path mask */
+        media-play-button #play-p1 {
+          clip-path: inset(0 100% 0 0);
+        }
+        media-play-button #play-p2 {
+          clip-path: inset(0 20% 0 100%);
+        }
+        media-play-button[mediapaused] #pause-p1 {
+          clip-path: inset(50% 0 50% 0);
+        }
+        media-play-button[mediapaused] #pause-p2 {
+          clip-path: inset(50% 0 50% 0);
+        }
+      </style>
+      <media-play-button mediapaused class="nw-button">
+        <svg slot="icon" viewBox="0 0 36 36">
+          <use class="svg-shadow" xlink:href="#icon-play"></use>
+          <g id="icon-play">
+            <path id="play-p1" d="M18.5 14L12 10V26L18.5 22V14Z" />
+            <path id="play-p2" d="M18 13.6953L25 18L18 22.3086V13.6953Z" />
+            <path id="pause-p1" d="M16 10H12V26H16V10Z" />
+            <path id="pause-p2" d="M21 10H25V26H21V10Z" />
+          </g>
+        </svg>
+      </media-play-button>
+
+      <template if="mediaadbreak == null">
+        <media-seek-backward-button seekoffset="10">
+          <svg slot="icon" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M16.908 21.7465C16.616 21.2426 16.2047 20.8212 15.7116 20.5206C15.2185 20.22 14.6594 20.0499 14.0851 20.0257C13.5109 20.0499 12.9518 20.22 12.4587 20.5206C11.9656 20.8212 11.5543 21.2426 11.2623 21.7465C10.5893 22.8804 10.2336 24.18 10.2336 25.5047C10.2336 26.8295 10.5893 28.129 11.2623 29.2629C11.5543 29.7668 11.9656 30.1882 12.4587 30.4888C12.9518 30.7894 13.5109 30.9595 14.0851 30.9838C14.6594 30.9595 15.2185 30.7894 15.7116 30.4888C16.2047 30.1882 16.616 29.7668 16.908 29.2629C17.581 28.129 17.9367 26.8295 17.9367 25.5047C17.9367 24.18 17.581 22.8804 16.908 21.7465ZM14.0851 29.409C12.8412 29.409 11.7886 27.6233 11.7886 25.4966C11.7886 23.3699 12.8412 21.5841 14.0851 21.5841C15.3291 21.5841 16.3817 23.3699 16.3817 25.4966C16.3817 27.6233 15.3451 29.409 14.0851 29.409ZM7.16351 30.9838V22.7043L6.39798 23.4836L5.31349 22.3796L7.38679 20.2692C7.49386 20.1598 7.63043 20.0853 7.77917 20.0551C7.92792 20.0248 8.08213 20.0403 8.22225 20.0994C8.36236 20.1585 8.48206 20.2587 8.56615 20.3872C8.65024 20.5157 8.69493 20.6667 8.69456 20.8211V31L7.16351 30.9838ZM33 9.8468V30.1883C32.9972 30.3941 32.9157 30.5907 32.7727 30.7362C32.6298 30.8817 32.4366 30.9647 32.2345 30.9675H22.2348V27.8343H29.9219V12.1845H11.4696V15.3177C11.4696 16.1782 10.8954 16.4866 10.1937 16.0158L3.52726 11.4865C3.30225 11.371 3.13094 11.17 3.05035 10.927C2.96977 10.6839 2.98641 10.4184 3.09666 10.1877C3.18836 9.99697 3.33987 9.84275 3.52726 9.7494L10.1937 5.22005C10.8954 4.74926 11.4696 5.05771 11.4696 5.91812V9.05133H32.2185C32.4248 9.05443 32.6218 9.13923 32.7677 9.28775C32.9136 9.43626 32.997 9.6368 33 9.8468Z"
+              fill="currentColor"
+            />
+          </svg>
+        </media-seek-backward-button>
+      </template>
+
+      <!-- Time Display -->
+      <style>
+        media-time-display {
+          padding-top: 6px;
+          padding-bottom: 6px;
+          font-size: 13px;
+        }
+
+        [mediaisfullscreen] media-time-display {
+          font-size: 20px;
+        }
+      </style>
+
+      <template if="mediaadbreak == null">
+        <media-time-display showduration></media-time-display>
+      </template>
+
+      <template if="mediaadbreak != null">
+        Advertisement
+        <media-time-display remaining></media-time-display>
+      </template>
+
+      <!-- Control Spacer -->
+      <style>
+        .control-spacer {
+          flex-grow: 1;
+        }
+      </style>
+      <span class="control-spacer"></span>
+
+      <!-- Volume/Mute -->
+      <style>
+        media-mute-button :is(#icon-muted, #icon-volume) {
+          transition: clip-path 0.3s ease-out;
+        }
+        media-mute-button #icon-muted {
+          clip-path: inset(0 0 100% 0);
+        }
+        media-mute-button[mediavolumelevel='off'] #icon-muted {
+          clip-path: inset(0);
+        }
+        media-mute-button #icon-volume {
+          clip-path: inset(0);
+        }
+        media-mute-button[mediavolumelevel='off'] #icon-volume {
+          clip-path: inset(100% 0 0 0);
+        }
+
+        media-mute-button #volume-high,
+        media-mute-button[mediavolumelevel='off'] #volume-high {
+          opacity: 1;
+          transition: opacity 0.3s;
+        }
+        media-mute-button[mediavolumelevel='low'] #volume-high,
+        media-mute-button[mediavolumelevel='medium'] #volume-high {
+          opacity: 0.2;
+        }
+
+        media-volume-range {
+          height: 36px;
+          --media-range-track-background: rgba(255, 255, 255, 0.2);
+        }
+
+        media-mute-button + media-volume-range {
+          width: 0;
+          overflow: hidden;
+          transition: width 0.2s ease-in;
+        }
+
+        /* Expand volume control in all relevant states */
+        media-mute-button:hover + media-volume-range,
+        media-mute-button:focus + media-volume-range,
+        media-mute-button:focus-within + media-volume-range,
+        media-volume-range:hover,
+        media-volume-range:focus,
+        media-volume-range:focus-within {
+          width: 70px;
+        }
+      </style>
+      <media-mute-button class="nw-button">
+        <svg slot="icon" viewBox="0 0 36 36">
+          <g id="icon-volume">
+            <path id="speaker" d="M13 15H9V21H13L18 26V10L13 15Z" />
+            <path
+              id="volume-low"
+              d="M20 22.0323C21.4818 21.2959 22.5 19.7669 22.5 18C22.5 16.2332 21.4818 14.7041 20 13.9678V22.0323Z"
+            />
+            <path
+              id="volume-high"
+              d="M20 9.22302V11.2899C22.8915 12.1505 25 14.829 25 18C25 21.171 22.8915 23.8495 20 24.7101V26.777C24.008 25.8675 27 22.2832 27 18C27 13.7168 24.008 10.1325 20 9.22302Z"
+            />
+          </g>
+          <g id="icon-muted">
+            <path
+              d="M10.2207 8.80817L8.80762 10.2213L13.2929 14.7065L13 14.9995H9V20.9995H13L18 25.9995V19.4136L22.1922 23.6058C21.5401 24.0942 20.8 24.4715 20 24.7096V26.7764C21.3453 26.4712 22.5761 25.8646 23.6177 25.0314L25.7782 27.1918L27.1924 25.7776L27.1913 25.7766L27.1902 25.7776L10.2207 8.80817Z"
+            />
+            <path
+              d="M25.8817 22.3478C26.5944 21.0589 27 19.5766 27 17.9995C27 13.7163 24.008 10.132 20 9.22247V11.2894C22.8915 12.1499 25 14.8284 25 17.9995C25 19.0177 24.7826 19.9851 24.3917 20.8578L25.8817 22.3478Z"
+            />
+            <path
+              d="M22.4139 18.88C22.4704 18.5952 22.5 18.3008 22.5 17.9995C22.5 16.2326 21.4818 14.7036 20 13.9672V16.4661L22.4139 18.88Z"
+            />
+            <path d="M18 14.4661V9.99945L15.7667 12.2328L18 14.4661Z" />
+          </g>
+        </svg>
+      </media-mute-button>
+      <media-volume-range></media-volume-range>
+
+      <!-- Settings Menu Button -->
+      <template if="mediaadbreak == null">
+        <style>
+          media-settings-menu-button svg {
+            transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
+            transform: rotateZ(0deg);
+          }
+          media-settings-menu-button[aria-expanded='true'] svg {
+            transform: rotateZ(30deg);
+          }
+        </style>
+        <media-rendition-menu-button class="nw-button">
+          <svg slot="icon" viewBox="0 0 36 36">
+            <use class="svg-shadow" xlink:href="#settings-icon"></use>
+            <path
+              id="settings-icon"
+              d="M11.8153 12.0477L14.2235 12.9602C14.6231 12.6567 15.0599 12.3996 15.5258 12.1971L15.9379 9.66561C16.5985 9.50273 17.2891 9.41632 18 9.41632C18.7109 9.41632 19.4016 9.50275 20.0622 9.66566L20.4676 12.1555C20.9584 12.3591 21.418 12.6227 21.8372 12.9372L24.1846 12.0477C25.1391 13.0392 25.8574 14.2597 26.249 15.6186L24.3196 17.1948C24.3531 17.4585 24.3704 17.7272 24.3704 18C24.3704 18.2727 24.3531 18.5415 24.3196 18.8051L26.249 20.3814C25.8574 21.7403 25.1391 22.9607 24.1846 23.9522L21.8372 23.0628C21.4179 23.3772 20.9584 23.6408 20.4676 23.8445L20.0622 26.3343C19.4016 26.4972 18.7109 26.5836 18 26.5836C17.2891 26.5836 16.5985 26.4972 15.9379 26.3344L15.5258 23.8029C15.0599 23.6003 14.6231 23.3433 14.2236 23.0398L11.8154 23.9523C10.8609 22.9608 10.1426 21.7404 9.75098 20.3815L11.7633 18.7375C11.7352 18.4955 11.7208 18.2495 11.7208 18C11.7208 17.7505 11.7352 17.5044 11.7633 17.2625L9.75098 15.6185C10.1426 14.2596 10.8609 13.0392 11.8153 12.0477ZM18 20.75C19.5188 20.75 20.75 19.5188 20.75 18C20.75 16.4812 19.5188 15.25 18 15.25C16.4812 15.25 15.25 16.4812 15.25 18C15.25 19.5188 16.4812 20.75 18 20.75Z"
+            />
+          </svg>
+        </media-rendition-menu-button>
+        <media-captions-menu-button></media-captions-menu-button>
+      </template>
+
+      <!-- Fullscreen Button -->
+      <style>
+        /* Having trouble getting @property to work in the shadow dom
+         to clean this up. Like https://codepen.io/luwes/pen/oNRyZyx */
+
+        media-fullscreen-button path {
+          translate: 0% 0%;
+        }
+        media-fullscreen-button:hover path {
+          animation: 0.35s up-left-bounce cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+        media-fullscreen-button:hover .urbounce {
+          animation-name: up-right-bounce;
+        }
+        media-fullscreen-button:hover .dlbounce {
+          animation-name: down-left-bounce;
+        }
+        media-fullscreen-button:hover .drbounce {
+          animation-name: down-right-bounce;
+        }
+
+        @keyframes up-left-bounce {
+          0% {
+            translate: 0 0;
+          }
+          50% {
+            translate: -4% -4%;
+          }
+        }
+        @keyframes up-right-bounce {
+          0% {
+            translate: 0 0;
+          }
+          50% {
+            translate: 4% -4%;
+          }
+        }
+        @keyframes down-left-bounce {
+          0% {
+            translate: 0 0;
+          }
+          50% {
+            translate: -4% 4%;
+          }
+        }
+        @keyframes down-right-bounce {
+          0% {
+            translate: 0 0;
+          }
+          50% {
+            translate: 4% 4%;
+          }
+        }
+      </style>
+      <media-fullscreen-button class="nw-button">
+        <svg slot="enter" viewBox="0 0 36 36">
+          <use class="svg-shadow" xlink:href="#fs-enter-paths"></use>
+          <g id="fs-enter-paths">
+            <path class="ulbounce" d="M11 15H9V9H15V11H11V15Z" />
+            <path class="urbounce" d="M21 11L21 9L27 9L27 15L25 15L25 11L21 11Z" />
+            <path class="dlbounce" d="M15 25L15 27L9 27L9 21L11 21L11 25L15 25Z" />
+            <path class="drbounce" d="M25 21L27 21L27 27L21 27L21 25L25 25L25 21Z" />
+          </g>
+        </svg>
+        <svg slot="exit" viewBox="0 0 36 36">
+          <use class="svg-shadow" xlink:href="#fs-exit-paths"></use>
+          <g id="fs-exit-paths">
+            <path class="drbounce" d="M14 9L16 9L16 16L9 16L9 14L14 14L14 9Z" />
+            <path class="dlbounce" d="M27 14L27 16L20 16L20 9L22 9L22 14L27 14Z" />
+            <path class="urbounce" d="M9 22L9 20L16 20L16 27L14 27L14 22L9 22Z" />
+            <path class="ulbounce" d="M22 27H20V20H27V22H22V27Z" />
+          </g>
+        </svg>
+      </media-fullscreen-button>
+    </media-control-bar>
+  </media-controller>
+</template>
diff --git a/packages/mux-player/src/types.d.ts b/packages/mux-player/src/types.ts
similarity index 63%
rename from packages/mux-player/src/types.d.ts
rename to packages/mux-player/src/types.ts
index 1f56f2ae8..140a9a1a2 100644
--- a/packages/mux-player/src/types.d.ts
+++ b/packages/mux-player/src/types.ts
@@ -1,5 +1,6 @@
 import type MuxVideoElement from '@mux/mux-video';
 import type { MediaError } from '@mux/mux-video';
+import type { EventMap as MuxVideoEventMap } from '@mux/mux-video';
 import type {
   MaxResolutionValue,
   MinResolutionValue,
@@ -9,6 +10,7 @@ import type {
 } from '@mux/playback-core';
 import type { AttributeTokenList } from './helpers';
 
+export type Props = MuxPlayerProps;
 export type MuxPlayerProps = Partial<MuxVideoElement> & {
   nohotkeys?: boolean;
   hotkeys?: AttributeTokenList;
@@ -57,6 +59,10 @@ export type MuxTemplateProps = Partial<MuxPlayerProps> & {
   defaultStreamType?: ValueOf<StreamTypes>;
   castReceiver: string | undefined;
   proudlyDisplayMuxBadge?: boolean;
+  adTagUrl: string | undefined;
+  adBreak: boolean;
+  /** Allow playback with ad blocker */
+  allowAdBlocker?: boolean;
 };
 
 export type DialogOptions = {
@@ -78,3 +84,31 @@ export type ErrorEvent = {
   player_error_message?: string;
   player_error_context?: string;
 };
+
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+
+export type EventMap = MuxPlayerElementEventMap;
+export type MuxPlayerElementEventMap = Expand<MuxVideoEventMap>;
+
+export interface IMuxPlayerElement {
+  addEventListener<K extends keyof MuxPlayerElementEventMap>(
+    type: K,
+    listener: (this: HTMLMediaElement, ev: MuxPlayerElementEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  removeEventListener<K extends keyof MuxPlayerElementEventMap>(
+    type: K,
+    listener: (this: HTMLMediaElement, ev: MuxPlayerElementEventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
diff --git a/packages/mux-player/src/video-api.ts b/packages/mux-player/src/video-api.ts
index 60f840e89..3ffde6b48 100644
--- a/packages/mux-player/src/video-api.ts
+++ b/packages/mux-player/src/video-api.ts
@@ -1,8 +1,7 @@
 import { globalThis } from './polyfills';
-import { VideoEvents } from '@mux/mux-video';
-import type MuxVideoElement from '@mux/mux-video';
 import * as logger from './logger';
 import { toNumberOrUndefined } from './utils';
+import type MuxVideoElement from '@mux/mux-video/ads';
 
 export type CastOptions = {
   receiverApplicationId: string;
@@ -12,10 +11,6 @@ export type CastOptions = {
   resumeSavedSession: boolean;
 };
 
-export type MuxVideoElementExt = MuxVideoElement & {
-  requestCast(options: CastOptions): Promise<undefined>;
-};
-
 const AllowedVideoAttributes = {
   AUTOPLAY: 'autoplay',
   CROSSORIGIN: 'crossorigin',
@@ -23,7 +18,7 @@ const AllowedVideoAttributes = {
   MUTED: 'muted',
   PLAYSINLINE: 'playsinline',
   PRELOAD: 'preload',
-};
+} as const;
 
 const CustomVideoAttributes = {
   VOLUME: 'volume',
@@ -33,6 +28,11 @@ const CustomVideoAttributes = {
   MUTED: 'muted',
 };
 
+export const Attributes = {
+  ...AllowedVideoAttributes,
+  ...CustomVideoAttributes,
+} as const;
+
 const emptyTimeRanges: TimeRanges = Object.freeze({
   length: 0,
   start(index: number) {
@@ -55,12 +55,13 @@ const emptyTimeRanges: TimeRanges = Object.freeze({
   },
 });
 
-const AllowedVideoEvents = VideoEvents.filter((type) => type !== 'error');
 const AllowedVideoAttributeNames = Object.values(AllowedVideoAttributes).filter(
-  (name) => ![AllowedVideoAttributes.PLAYSINLINE].includes(name)
+  (name) => AllowedVideoAttributes.PLAYSINLINE !== name
 );
 const CustomVideoAttributesNames = Object.values(CustomVideoAttributes);
 
+export const AttributeNames = [...AllowedVideoAttributeNames, ...CustomVideoAttributesNames];
+
 // NOTE: Some of these are defined in MuxPlayerElement. We may want to apply a
 // `Pick<>` on these to also enforce consistency (CJP).
 type PartialHTMLVideoElement = Omit<
@@ -117,6 +118,11 @@ interface VideoApiElement extends PartialHTMLVideoElement, HTMLElement {
     listener: EventListenerOrEventListenerObject,
     options?: boolean | AddEventListenerOptions
   ): void;
+  addEventListener(
+    type: string,
+    listener: (event: CustomEvent) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
   removeEventListener<K extends keyof HTMLVideoElementEventMap>(
     type: K,
     listener: (this: HTMLVideoElement, ev: HTMLVideoElementEventMap[K]) => any,
@@ -127,12 +133,17 @@ interface VideoApiElement extends PartialHTMLVideoElement, HTMLElement {
     listener: EventListenerOrEventListenerObject,
     options?: boolean | EventListenerOptions
   ): void;
+  removeEventListener(
+    type: string,
+    listener: (event: CustomEvent) => void,
+    options?: boolean | EventListenerOptions
+  ): void;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 class VideoApiElement extends globalThis.HTMLElement implements VideoApiElement {
   static get observedAttributes() {
-    return [...AllowedVideoAttributeNames, ...CustomVideoAttributesNames];
+    return AttributeNames as string[];
   }
 
   /**
@@ -144,20 +155,6 @@ class VideoApiElement extends globalThis.HTMLElement implements VideoApiElement
     super();
   }
 
-  /**
-   * Gets called from mux-player when mux-video is rendered and upgraded.
-   * We might just merge VideoApiElement in MuxPlayerElement and remove this?
-   */
-  init() {
-    // The video events are dispatched on the VideoApiElement instance.
-    // This makes it possible to add event listeners before the element is upgraded.
-    AllowedVideoEvents.forEach((type) => {
-      this.media?.addEventListener(type, (evt) => {
-        this.dispatchEvent(new Event(evt.type));
-      });
-    });
-  }
-
   attributeChangedCallback(attrName: string, _oldValue: string | null, newValue: string) {
     switch (attrName) {
       case CustomVideoAttributes.MUTED: {
@@ -197,11 +194,7 @@ class VideoApiElement extends globalThis.HTMLElement implements VideoApiElement
     this.media?.load();
   }
 
-  requestCast(options: CastOptions) {
-    return this.media?.requestCast(options);
-  }
-
-  get media(): MuxVideoElementExt | null | undefined {
+  get media(): MuxVideoElement | undefined | null {
     return this.shadowRoot?.querySelector('mux-video');
   }
 
diff --git a/packages/mux-video/README.md b/packages/mux-video/README.md
index 4d2a3434f..14e97dc16 100644
--- a/packages/mux-video/README.md
+++ b/packages/mux-video/README.md
@@ -78,7 +78,7 @@ Now you are free to use this web component in your HTML, just as you would with
 </body>
 ```
 
-Attributes:
+### Attributes
 
 - `playback-id`: This is the playback ID for your Mux Asset or Mux Live Stream. The playback-id is the variable you may have used before to construct a `.m3u8` hls url like this:`https://stream.mux.com/{PLAYBACK_ID}.m3u8`. [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id)
 - `env-key`: This is the environment key for Mux Data. Note that this is different than your API Key. Get your env key from the "Mux Data" part of the Mux Dashboard. If undefined and you are playing a Mux Video asset, the environment will be inferred.
@@ -100,6 +100,16 @@ Attributes:
 
 All the other attributes that you would use on a `<video>` element like `poster`, `controls`, `muted` and `autoplay` are available and will work the same as they do with the HTML5 video element. One sidenote about `autoplay` though -- [read this to understand why that might not always work as expected](https://docs.mux.com/guides/video/web-autoplay-your-videos).
 
+### Events
+
+`<mux-video>` emits the same events as the HTML5 `<video>` element plus the following events:
+
+- `cuepointchange`: The `cuepointchange` event fires whenever the `activeCuePoint` property changes.
+- `chapterchange`: The `chapterchange` event fires whenever the `activeChapter` property changes.
+- `targetlivewindowchange`: The `targetlivewindowchange` event fires whenever the `targetLiveWindow` property changes.
+- `streamtypechange`: The `streamtypechange` event fires whenever the `streamType` property changes.
+- `seekablechange`: The `seekablechange` event fires whenever the `seekable` property changes.
+
 ### Advanced: more metadata
 
 To go above and beyond `metadata-*` attributes
diff --git a/packages/mux-video/package.json b/packages/mux-video/package.json
index c65fdbc30..6ff7307f7 100644
--- a/packages/mux-video/package.json
+++ b/packages/mux-video/package.json
@@ -19,16 +19,34 @@
       ".": [
         "./dist/types-ts3.4/index.d.ts"
       ],
+      "base": [
+        "./dist/types-ts3.4/base.d.ts"
+      ],
       "react": [
         "./dist/types-ts3.4/react.d.ts"
+      ],
+      "ads": [
+        "./dist/types-ts3.4/ads/index.d.ts"
+      ],
+      "ads/mixin": [
+        "./dist/types-ts3.4/ads/mixin/index.d.ts"
       ]
     },
     "*": {
       ".": [
         "./dist/types/index.d.ts"
       ],
+      "base": [
+        "./dist/types/base.d.ts"
+      ],
       "react": [
         "./dist/types/react.d.ts"
+      ],
+      "ads": [
+        "./dist/types/ads/index.d.ts"
+      ],
+      "ads/mixin": [
+        "./dist/types/ads/mixin/index.d.ts"
       ]
     }
   },
@@ -40,11 +58,38 @@
       "require": "./dist/index.cjs.js",
       "default": "./dist/index.cjs.js"
     },
-    "./react": {
-      "types": "./dist/types/react.d.ts",
-      "import": "./dist/react.mjs",
-      "require": "./dist/react.cjs.js",
-      "default": "./dist/react.cjs.js"
+    "./base": {
+      "types@<4.3.5": "./dist/types-ts3.4/base.d.ts",
+      "types": "./dist/types/base.d.ts",
+      "import": "./dist/base.mjs",
+      "require": "./dist/base.cjs.js",
+      "default": "./dist/base.cjs.js"
+    },
+    "./ads": {
+      "types@<4.3.5": "./dist/types-ts3.4/ads/index.d.ts",
+      "types": "./dist/types/ads/index.d.ts",
+      "import": "./dist/ads/index.mjs",
+      "require": "./dist/ads/index.cjs.js",
+      "default": "./dist/ads/index.cjs.js"
+    },
+    "./ads/mixin": {
+      "types@<4.3.5": "./dist/types-ts3.4/ads/mixin/index.d.ts",
+      "types": "./dist/types/ads/mixin/index.d.ts",
+      "import": "./dist/ads/mixin/index.mjs",
+      "require": "./dist/ads/mixin/index.cjs.js",
+      "default": "./dist/ads/mixin/index.cjs.js"
+    },
+    "./*.js": {
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs.js",
+      "default": "./dist/*.js"
+    },
+    "./*": {
+      "types@<4.3.5": "./dist/types-ts3.4/*.d.ts",
+      "types": "./dist/types/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.cjs.js",
+      "default": "./dist/*.mjs"
     }
   },
   "types": "./dist/types/index.d.ts",
@@ -60,26 +105,33 @@
     "lint": "ESLINT_USE_FLAT_CONFIG=false eslint src/ --ext .js,.jsx,.ts,.tsx",
     "test": "web-test-runner **/*test.js --port 8002 --coverage --config test/web-test-runner.config.mjs --root-dir ../..",
     "posttest": "replace 'SF:src/' 'SF:packages/mux-video/src/' coverage/lcov.info --silent",
-    "dev:iife": "npm run build:iife -- --watch=forever",
-    "dev:cjs": "npm run build:cjs -- --watch=forever",
-    "dev:esm": "npm run build:esm -- --watch=forever",
-    "dev:esm-module": "npm run build:esm-module -- --watch=forever",
-    "dev:react:cjs": "npm run build:react:cjs -- --watch=forever",
-    "dev:react:esm": "npm run build:react:esm -- --watch=forever",
     "dev:types": "npm run build:types -- -w",
-    "dev": "npm-run-all --parallel dev:types dev:esm dev:cjs dev:iife dev:react:*",
-    "build:esm": "esbuild src/index.ts --target=es2019 --external:@mux/* --bundle --sourcemap --metafile=./dist/esm.json --format=esm --outdir=dist --out-extension:.js=.mjs --define:PLAYER_VERSION=\"'$npm_package_version'\"",
-    "build:esm-module": "esbuild src/index.ts --target=es2019 --bundle --sourcemap --metafile=./dist/module.json --format=esm --outfile=./dist/mux-video.mjs --define:PLAYER_VERSION=\"'$npm_package_version'\"",
-    "build:cjs": "esbuild src/index.ts --target=es2019 --external:@mux/* --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --outdir=dist --out-extension:.js=.cjs.js --define:PLAYER_VERSION=\"'$npm_package_version'\"",
-    "build:iife": "esbuild src/index.ts --target=es2019 --bundle --sourcemap --metafile=./dist/iife.json --format=iife --outfile=./dist/mux-video.js --define:PLAYER_VERSION=\"'$npm_package_version'\"",
-    "build:react:cjs": "esbuild src/react.ts --target=es2019 --bundle --format=cjs --outdir=dist --out-extension:.js=.cjs.js --external:react --external:@mux/mux-video",
-    "build:react:esm": "esbuild src/react.ts --target=es2019 --bundle --format=esm --outdir=dist --out-extension:.js=.mjs --external:react --external:@mux/mux-video",
+    "dev:iife": "npm-run-all --parallel 'build:iife:** -- --watch=forever'",
+    "dev:cjs": "npm-run-all --parallel 'build:cjs:** -- --watch=forever'",
+    "dev:esm": "npm-run-all --parallel 'build:esm:** -- --watch=forever'",
+    "dev:esm-module": "npm-run-all --parallel 'build:esm-module:** -- --watch=forever'",
+    "dev": "npm-run-all --parallel dev:types dev:iife dev:cjs dev:esm dev:esm-module",
+    "build:esm:index": "esbuild src/index.ts --target=es2019 --external:@mux/* --external:castable-video --external:custom-media-element --external:media-tracks --bundle --sourcemap --metafile=./dist/esm.json --format=esm --outdir=dist --out-extension:.js=.mjs --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:esm-module:index": "esbuild src/index.ts --target=es2019 --bundle --sourcemap --metafile=./dist/module.json --format=esm --outfile=./dist/mux-video.mjs --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:cjs:index": "esbuild src/index.ts --target=es2019 --external:@mux/* --external:castable-video --external:custom-media-element --external:media-tracks --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --outdir=dist --out-extension:.js=.cjs.js --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:iife:index": "esbuild src/index.ts --target=es2019 --bundle --sourcemap --metafile=./dist/iife.json --format=iife --outfile=./dist/mux-video.js --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:esm:base": "esbuild src/base.ts --target=es2019 --external:@mux/* --external:custom-media-element --bundle --sourcemap --metafile=./dist/base/esm.json --format=esm --outdir=dist --out-extension:.js=.mjs --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:cjs:base": "esbuild src/base.ts --target=es2019 --external:@mux/* --external:custom-media-element --bundle --sourcemap --metafile=./dist/base/cjs.json --format=cjs --outdir=dist --out-extension:.js=.cjs.js --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:cjs:react": "esbuild src/react.ts --target=es2019 --bundle --format=cjs --outdir=dist --out-extension:.js=.cjs.js --external:react --external:@mux/mux-video",
+    "build:esm:react": "esbuild src/react.ts --target=es2019 --bundle --format=esm --outdir=dist --out-extension:.js=.mjs --external:react --external:@mux/mux-video",
+    "build:esm:ads": "esbuild src/ads/index.ts --target=es2019 --external:@mux/* --external:castable-video --external:custom-media-element --external:media-tracks --bundle --sourcemap --metafile=./dist/ads/esm.json --format=esm --outdir=dist/ads --out-extension:.js=.mjs --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:cjs:ads": "esbuild src/ads/index.ts --target=es2019 --external:@mux/* --external:castable-video --external:custom-media-element --external:media-tracks --bundle --sourcemap --metafile=./dist/ads/cjs.json --format=cjs --outdir=dist/ads --out-extension:.js=.cjs.js --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:esm:ads:mixin": "esbuild src/ads/mixin/index.ts --target=es2019 --external:@mux/* --external:castable-video --external:custom-media-element --external:media-tracks --bundle --sourcemap --metafile=./dist/ads/mixin/esm.json --format=esm --outdir=dist/ads/mixin --out-extension:.js=.mjs --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:cjs:ads:mixin": "esbuild src/ads/mixin/index.ts --target=es2019 --external:@mux/* --external:castable-video --external:custom-media-element --external:media-tracks --bundle --sourcemap --metafile=./dist/ads/mixin/cjs.json --format=cjs --outdir=dist/ads/mixin --out-extension:.js=.cjs.js --define:PLAYER_VERSION=\"'$npm_package_version'\"",
+    "build:esm:ads:react": "esbuild src/ads/react.ts --target=es2019 --bundle --format=esm --outdir=dist/ads --out-extension:.js=.mjs --external:react --external:@mux/mux-video",
+    "build:cjs:ads:react": "esbuild src/ads/react.ts --target=es2019 --bundle --format=cjs --outdir=dist/ads --out-extension:.js=.cjs.js --external:react --external:@mux/mux-video",
     "copypolyfills": "shx mkdir -p src/polyfills && shx cp ../../shared/polyfills/index.ts ./src/polyfills/index.ts",
     "build:types": "tsc",
     "postbuild:types": "downlevel-dts ./dist/types ./dist/types-ts3.4",
-    "build": "npm-run-all --parallel 'build:esm -- --minify' 'build:iife -- --minify' 'build:cjs -- --minify' 'build:esm-module -- --minify' 'build:react:cjs -- --minify' 'build:react:esm -- --minify'"
+    "build": "npm-run-all 'build:esm:base -- --minify' 'build:cjs:base -- --minify' 'build:esm:ads:mixin -- --minify' 'build:cjs:ads:mixin -- --minify' --parallel 'build:esm:** -- --minify' 'build:cjs:** -- --minify' 'build:iife:** -- --minify' 'build:esm-module:** -- --minify'"
   },
   "dependencies": {
+    "@mux/mux-data-google-ima": "0.2.8",
     "@mux/playback-core": "0.29.1",
     "castable-video": "~1.1.10",
     "custom-media-element": "~1.4.5",
@@ -87,6 +139,7 @@
   },
   "devDependencies": {
     "@open-wc/testing": "^4.0.0",
+    "@types/google_interactive_media_ads_types": "^3.697.0",
     "@typescript-eslint/eslint-plugin": "^8.27.0",
     "@typescript-eslint/parser": "^8.27.0",
     "@web/dev-server-esbuild": "^1.0.4",
diff --git a/packages/mux-video/src/ads/README.md b/packages/mux-video/src/ads/README.md
new file mode 100644
index 000000000..dec98e2e2
--- /dev/null
+++ b/packages/mux-video/src/ads/README.md
@@ -0,0 +1,46 @@
+# &lt;mux-video/&gt; with ads
+
+## Installation
+
+See [mux-video](../../README.md#installation) for installation instructions.
+
+With the import path `@mux/mux-video/ads` you will get the ads version of the mux-video web component.
+
+## Usage
+
+See [mux-video](../../README.md#usage) for usage instructions.
+
+### Attributes
+
+See [mux-video](../../README.md#attributes) for the list of base attributes.
+
+- `ad-tag-url`: This is the URL of the VAST ad tag to be used for ad playback.
+- `allow-ad-blocker`: When present, allows the content to be played even if the ad is blocked by an ad blocker.
+
+### Properties
+
+- `adTagUrl`: This is the URL of the VAST ad tag to be used for ad playback.
+- `allowAdBlocker`: When set to true, allows the content to be played even if the ad is blocked by an ad blocker.
+- `ad`: This is the ad object that was last created.
+- `adsLoader`: This is the ads loader object that is used to load and play ads.
+
+### Events
+
+See [mux-video](../../README.md#events) for the list of base events.
+
+- `adrequest`: The adrequest event is fired when the ad request is made.
+- `adresponse`: The adresponse event is fired when the ad response is received.
+- `adimpression`: The adimpression event is fired when the ad impression is made.
+- `adbreakstart`: The adbreakstart event is fired when the ad break starts.
+- `adplay`: The adplay event is fired when a call is made to play an ad.
+- `adplaying`: The adplaying event is fired when the ad starts playing.
+- `adpause`: The adpause event is fired when the ad is paused.
+- `adfirstquartile`: The adfirstquartile event is fired when the ad first quartile is reached.
+- `admidpoint`: The admidpoint event is fired when the ad midpoint is reached.
+- `adthirdquartile`: The adthirdquartile event is fired when the ad third quartile is reached.
+- `adclick`: The adclick event is fired when the ad is clicked by the user.
+- `adskip`: The adskip event is fired when the ad is skipped by the user.
+- `adclose`: The adclose event is fired when the ad is closed by the user.
+- `adended`: The adended event is fired when one ad ends.
+- `adbreakend`: The adbreakend event is fired when the ad break ends.
+- `aderror`: The aderror event is fired when an ad error occurs.
diff --git a/packages/mux-video/src/ads/index.ts b/packages/mux-video/src/ads/index.ts
new file mode 100644
index 000000000..62d947fa5
--- /dev/null
+++ b/packages/mux-video/src/ads/index.ts
@@ -0,0 +1,159 @@
+/* eslint @typescript-eslint/triple-slash-reference: "off" */
+/// <reference types="google_interactive_media_ads_types" preserve="true"/>
+/// <reference path="../../../../node_modules/mux-embed/dist/types/mux-embed.d.ts" preserve="true" />
+
+/** @TODO publish types for package to use here (CJP) */
+// @ts-ignore
+import mux from '@mux/mux-data-google-ima';
+import type { MuxDataSDK } from '@mux/playback-core';
+import { Autoplay } from '@mux/playback-core';
+import { MuxVideoBaseElement, Attributes as BaseAttributes, EventMap as BaseEventMap } from '@mux/mux-video/base';
+import { CastableMediaMixin } from 'castable-video/castable-mixin.js';
+import { MediaTracksMixin } from 'media-tracks';
+import { globalThis } from '../polyfills';
+import {
+  AdsVideoMixin,
+  Attributes as AdsAttributes,
+  Events as AdEvents,
+  Expand,
+  EventMap as AdEventMap,
+} from '@mux/mux-video/ads/mixin';
+
+export * from '@mux/mux-video/base';
+
+export type EventMap = Expand<BaseEventMap & AdEventMap>;
+
+export const Attributes = {
+  ...BaseAttributes,
+  ...AdsAttributes,
+} as const;
+
+// castable-video should be mixed in last so that it can override load().
+class MuxVideoElement extends CastableMediaMixin(MediaTracksMixin(AdsVideoMixin(MuxVideoBaseElement))) {
+  #muxDataKeepSession = false;
+
+  handleEvent(event: Event) {
+    super.handleEvent(event);
+
+    if (event.type === AdEvents.AD_BREAK_START) {
+      this.#handleAdBreakStart();
+    } else if (event.type === AdEvents.AD_BREAK_END) {
+      this.#handleAdBreakEnd();
+    }
+  }
+
+  #handleAdBreakStart() {
+    if (!this.ad?.isLinear()) return;
+
+    if (this.ad?.isCustomPlaybackUsed()) {
+      this.muxDataKeepSession = true;
+      this.unload();
+      this.muxDataKeepSession = false;
+    }
+  }
+
+  #handleAdBreakEnd() {
+    if (!this.ad?.isLinear()) return;
+
+    if (this.ad?.isCustomPlaybackUsed()) {
+      this.muxDataKeepSession = true;
+      this.load();
+      this.muxDataKeepSession = false;
+    }
+  }
+
+  get muxDataSDK() {
+    return mux as MuxDataSDK;
+  }
+
+  get muxDataSDKOptions() {
+    return {
+      imaAdsLoader: this.adsLoader,
+    };
+  }
+
+  set muxDataKeepSession(val) {
+    // Don't sprout attributes here, this setter is used internally.
+    this.#muxDataKeepSession = Boolean(val);
+  }
+
+  get muxDataKeepSession() {
+    return this.#muxDataKeepSession;
+  }
+
+  // Define autoplay in the most outer layer because mux-video accepts string | boolean
+  // which is not compatible the CustomVideoElement.autoplay boolean only type.
+  /** @ts-ignore */
+  get autoplay(): Autoplay {
+    const attr = this.getAttribute('autoplay');
+
+    if (attr === null) {
+      return false;
+    } else if (attr === '') {
+      return true;
+    } else {
+      return attr as Autoplay;
+    }
+  }
+
+  /** @ts-ignore */
+  set autoplay(val: Autoplay) {
+    const currentVal = this.autoplay;
+    if (val === currentVal) {
+      return;
+    }
+
+    if (val) {
+      this.setAttribute('autoplay', typeof val === 'string' ? val : '');
+    } else {
+      this.removeAttribute('autoplay');
+    }
+  }
+
+  // NOTE: CastableMediaMixin needs to be a subclass of whatever implements the load() method
+  // (i.e. MuxVideoBaseElement), but we're overriding castCustomData to provide mux-specific
+  // values by default, so it needs to be defined here (i.e. in the composed subclass of
+  // CastableMediaMixin). (CJP)
+  #castCustomData: Record<string, any> | undefined;
+
+  get muxCastCustomData() {
+    return {
+      mux: {
+        // Mux Video values
+        playbackId: this.playbackId,
+        minResolution: this.minResolution,
+        maxResolution: this.maxResolution,
+        renditionOrder: this.renditionOrder,
+        customDomain: this.customDomain,
+        /** @TODO Add this.tokens to MuxVideoElement (CJP) */
+        tokens: {
+          drm: this.drmToken,
+        },
+        // Mux Data values
+        envKey: this.envKey,
+        metadata: this.metadata,
+        disableCookies: this.disableCookies,
+        disableTracking: this.disableTracking,
+        beaconCollectionDomain: this.beaconCollectionDomain,
+        // Playback values
+        startTime: this.startTime,
+        // Other values
+        preferCmcd: this.preferCmcd,
+      },
+    } as const;
+  }
+
+  get castCustomData() {
+    return this.#castCustomData ?? this.muxCastCustomData;
+  }
+
+  set castCustomData(val: Record<string, any> | undefined) {
+    this.#castCustomData = val;
+  }
+}
+
+if (!globalThis.customElements.get('mux-video')) {
+  globalThis.customElements.define('mux-video', MuxVideoElement);
+}
+
+export default MuxVideoElement;
diff --git a/packages/mux-video/src/ads/mixin/events.ts b/packages/mux-video/src/ads/mixin/events.ts
new file mode 100644
index 000000000..c53d5cc39
--- /dev/null
+++ b/packages/mux-video/src/ads/mixin/events.ts
@@ -0,0 +1,33 @@
+export class AdEvent extends Event {}
+
+export const Events = {
+  // https://www.mux.com/docs/guides/mux-data-playback-events#ad-events
+  AD_REQUEST: 'adrequest',
+  AD_RESPONSE: 'adresponse',
+  AD_BREAK_START: 'adbreakstart',
+  AD_FIRST_QUARTILE: 'adfirstquartile',
+  AD_MIDPOINT: 'admidpoint',
+  AD_THIRD_QUARTILE: 'adthirdquartile',
+  AD_ENDED: 'adended',
+  AD_BREAK_END: 'adbreakend',
+  AD_ERROR: 'aderror',
+  AD_PLAY: 'adplay',
+  AD_PLAYING: 'adplaying',
+  AD_PAUSE: 'adpause',
+
+  // Useful ad specific events that are not part of the Mux Data spec
+  AD_IMPRESSION: 'adimpression',
+  AD_CLICK: 'adclick',
+  AD_SKIP: 'adskip',
+  AD_CLOSE: 'adclose',
+
+  // Use standard events if possible to be consistent with HTMLVideoElement
+  // https://www.w3.org/TR/html52/semantics-embedded-content.html#mediaevents
+  PLAY: 'play',
+  PLAYING: 'playing',
+  PAUSE: 'pause',
+  VOLUME_CHANGE: 'volumechange',
+  TIME_UPDATE: 'timeupdate',
+  DURATION_CHANGE: 'durationchange',
+  WAITING: 'waiting',
+} as const;
diff --git a/packages/mux-video/src/ads/mixin/google-ima-client-ad.ts b/packages/mux-video/src/ads/mixin/google-ima-client-ad.ts
new file mode 100644
index 000000000..27e954a5c
--- /dev/null
+++ b/packages/mux-video/src/ads/mixin/google-ima-client-ad.ts
@@ -0,0 +1,19 @@
+import type { IAdsVideoClientAd } from './types.js';
+
+export class GoogleImaClientAd implements IAdsVideoClientAd {
+  #ad: google.ima.Ad;
+  #manager: google.ima.AdsManager;
+
+  constructor(ad: google.ima.Ad, manager: google.ima.AdsManager) {
+    this.#ad = ad;
+    this.#manager = manager;
+  }
+
+  isLinear() {
+    return this.#ad.isLinear();
+  }
+
+  isCustomPlaybackUsed() {
+    return this.#manager.isCustomPlaybackUsed();
+  }
+}
diff --git a/packages/mux-video/src/ads/mixin/google-ima-client-provider.ts b/packages/mux-video/src/ads/mixin/google-ima-client-provider.ts
new file mode 100644
index 000000000..205f0435a
--- /dev/null
+++ b/packages/mux-video/src/ads/mixin/google-ima-client-provider.ts
@@ -0,0 +1,333 @@
+/* eslint @typescript-eslint/triple-slash-reference: "off" */
+/// <reference types="google_interactive_media_ads_types" preserve="true"/>
+import { Events, AdEvent } from './events.js';
+import { GoogleImaClientAd } from './google-ima-client-ad.js';
+import { IAdsVideoClientProvider } from './types.js';
+
+export type GoogleImaClientProviderConfig = {
+  adContainer: HTMLElement;
+  videoElement: HTMLVideoElement;
+  originalSize: DOMRect;
+};
+
+export class GoogleImaClientProvider extends EventTarget implements IAdsVideoClientProvider {
+  static isSDKAvailable() {
+    if (!('google' in globalThis && 'ima' in globalThis['google'])) {
+      console.error('Missing google.ima SDK. Make sure you include it via a script tag.');
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  #adContainer: HTMLElement;
+  #videoElement: HTMLVideoElement;
+  #originalSize: DOMRect;
+  #resizeObserver?: ResizeObserver;
+  #adDisplayContainer: google.ima.AdDisplayContainer;
+  #adsLoader: google.ima.AdsLoader;
+  #adsManager?: google.ima.AdsManager;
+  #imaAd?: google.ima.Ad | null;
+  #ad?: GoogleImaClientAd;
+  #adProgressData?: google.ima.AdProgressData;
+  #initializedAdDisplayContainer = false;
+  #adPaused = false;
+  #videoPlayed = false;
+  #adBreak = false;
+  #lastCurrentTime = 0;
+
+  constructor(config: GoogleImaClientProviderConfig) {
+    super();
+
+    this.#adContainer = config.adContainer;
+    this.#videoElement = config.videoElement;
+    this.#originalSize = config.originalSize;
+
+    this.#videoPlayed = !this.#videoElement.paused;
+    this.#videoElement.addEventListener('play', this.#onVideoPlay);
+    this.#videoElement.addEventListener('seeking', this.#onVideoSeeking);
+    this.#videoElement.addEventListener('ended', this.#onVideoEnded);
+
+    this.#adDisplayContainer = new google.ima.AdDisplayContainer(this.#adContainer, this.#videoElement);
+    this.#adsLoader = new google.ima.AdsLoader(this.#adDisplayContainer);
+
+    this.#adsLoader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, this.#onAdError);
+    this.#adsLoader.addEventListener(
+      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
+      this.#onAdsManagerLoaded
+    );
+
+    this.#resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        if (width > 0 && height > 0) {
+          this.#resize(width, height);
+        }
+      }
+    });
+    this.#resizeObserver?.observe(this.#adContainer);
+  }
+
+  destroy() {
+    this.#videoElement.removeEventListener('play', this.#onVideoPlay);
+    this.#videoElement.removeEventListener('seeking', this.#onVideoSeeking);
+    this.#videoElement.removeEventListener('ended', this.#onVideoEnded);
+
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = undefined;
+
+    this.#adsManager?.stop();
+    this.#adsManager?.destroy();
+    this.#adDisplayContainer?.destroy();
+    this.#adsLoader?.destroy();
+  }
+
+  unload() {
+    this.#adsManager?.stop();
+    // Wait for the next tick to ensure the ad is stopped and the content is resumed.
+    setTimeout(() => {
+      this.#adsManager?.destroy();
+    }, 0);
+  }
+
+  #resize(width: number, height: number) {
+    this.#originalSize = { ...this.#originalSize, width, height };
+    this.#adsManager?.resize(this.#originalSize.width, this.#originalSize.height);
+  }
+
+  #onVideoPlay = () => {
+    this.#videoPlayed = true;
+
+    if (this.#adBreak && !this.#adsManager?.isCustomPlaybackUsed()) {
+      console.warn('Video play prevented during ad break');
+      this.#videoElement.pause();
+    }
+  };
+
+  #onVideoSeeking = () => {
+    if (this.#adBreak && !this.#adsManager?.isCustomPlaybackUsed()) {
+      if (this.#videoElement.currentTime !== this.#lastCurrentTime) {
+        console.warn('Seek prevented during ad break');
+        this.#videoElement.currentTime = this.#lastCurrentTime;
+        this.#videoElement.dispatchEvent(new Event('timeupdate'));
+      }
+    }
+  };
+
+  #onVideoEnded = () => {
+    this.#adsLoader?.contentComplete();
+  };
+
+  #onAdError = (adErrorEvent: google.ima.AdErrorEvent) => {
+    console.error('Ad error', adErrorEvent.getError()?.getMessage());
+    this.dispatchEvent(new AdEvent(Events.AD_ERROR));
+    this.#onAdComplete();
+  };
+
+  #onAdComplete(_adEvent?: google.ima.AdEvent) {
+    this.dispatchEvent(new AdEvent(Events.AD_ENDED));
+  }
+
+  #onAdsManagerLoaded = async (loadedEvent: google.ima.AdsManagerLoadedEvent) => {
+    const adsRenderingSettings = new google.ima.AdsRenderingSettings();
+    this.#adsManager = loadedEvent.getAdsManager(this.#videoElement, adsRenderingSettings);
+
+    this.#adsManager?.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, this.#onAdError);
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.LOADED, () => {
+      this.dispatchEvent(new AdEvent(Events.AD_RESPONSE));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, (event: google.ima.AdEvent) => {
+      this.#imaAd = event.getAd();
+
+      if (!this.#imaAd || !this.#adsManager) {
+        console.warn('Google IMA ad is undefined');
+        return;
+      }
+
+      this.#adBreak = true;
+      this.#lastCurrentTime = this.#videoElement.currentTime || 0;
+      this.#ad = new GoogleImaClientAd(this.#imaAd, this.#adsManager);
+      this.dispatchEvent(new AdEvent(Events.AD_BREAK_START));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.CLICK, () => {
+      this.dispatchEvent(new AdEvent(Events.AD_CLICK));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.IMPRESSION, () => {
+      this.dispatchEvent(new AdEvent(Events.AD_IMPRESSION));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.SKIPPED, () => {
+      this.dispatchEvent(new AdEvent(Events.AD_SKIP));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.USER_CLOSE, () => {
+      this.dispatchEvent(new AdEvent(Events.AD_CLOSE));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.FIRST_QUARTILE, () => {
+      this.dispatchEvent(new AdEvent(Events.AD_FIRST_QUARTILE));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.MIDPOINT, () => {
+      this.dispatchEvent(new AdEvent(Events.AD_MIDPOINT));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.THIRD_QUARTILE, () => {
+      this.dispatchEvent(new AdEvent(Events.AD_THIRD_QUARTILE));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.COMPLETE, (event: google.ima.AdEvent) => {
+      this.#onAdComplete(event);
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.SKIPPED, (event: google.ima.AdEvent) => {
+      this.#onAdComplete(event);
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, () => {
+      this.#adBreak = false;
+      this.dispatchEvent(new AdEvent(Events.AD_BREAK_END));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.STARTED, () => {
+      this.dispatchEvent(new AdEvent(Events.AD_PLAYING));
+      this.dispatchEvent(new AdEvent(Events.PLAYING));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.PAUSED, () => {
+      this.#adPaused = true;
+      this.dispatchEvent(new AdEvent(Events.AD_PAUSE));
+      this.dispatchEvent(new AdEvent(Events.PAUSE));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.RESUMED, () => {
+      this.#adPaused = false;
+      this.dispatchEvent(new AdEvent(Events.AD_PLAY));
+      this.dispatchEvent(new AdEvent(Events.PLAY));
+      this.dispatchEvent(new AdEvent(Events.AD_PLAYING));
+      this.dispatchEvent(new AdEvent(Events.PLAYING));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.AD_BUFFERING, () => {
+      this.dispatchEvent(new AdEvent(Events.WAITING));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.AD_PROGRESS, (adProgressEvent: google.ima.AdEvent) => {
+      this.#adProgressData = adProgressEvent.getAdData() as google.ima.AdProgressData;
+      this.dispatchEvent(new AdEvent(Events.TIME_UPDATE));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.DURATION_CHANGE, () => {
+      this.dispatchEvent(new AdEvent(Events.DURATION_CHANGE));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.VOLUME_CHANGED, () => {
+      this.dispatchEvent(new AdEvent(Events.VOLUME_CHANGE));
+    });
+
+    this.#adsManager?.addEventListener(google.ima.AdEvent.Type.VOLUME_MUTED, () => {
+      this.dispatchEvent(new AdEvent(Events.VOLUME_CHANGE));
+    });
+
+    try {
+      if (this.#videoPlayed) {
+        this.#startAds();
+      } else {
+        this.#videoElement.addEventListener(
+          'play',
+          () => {
+            this.#videoPlayed = true;
+            this.#startAds();
+          },
+          { once: true }
+        );
+      }
+    } catch {
+      this.#onAdComplete();
+    }
+  };
+
+  #startAds() {
+    this.#adBreak = true;
+    this.#videoElement.pause();
+
+    // init() is included here because some ads (VMAP) start playing without the start() call.
+    this.#adsManager?.init(this.#originalSize.width, this.#originalSize.height);
+    this.#adsManager?.start();
+  }
+
+  get adsLoader() {
+    return this.#adsLoader;
+  }
+
+  get ad() {
+    return this.#ad;
+  }
+
+  get adBreak() {
+    return this.#adBreak;
+  }
+
+  get paused() {
+    return this.#adPaused;
+  }
+
+  get duration() {
+    return this.#adProgressData?.duration ?? this.#imaAd?.getDuration() ?? NaN;
+  }
+
+  get currentTime() {
+    return this.#adProgressData?.currentTime ?? 0;
+  }
+
+  get volume() {
+    return this.#adsManager?.getVolume() ?? 1;
+  }
+
+  set volume(val: number) {
+    this.#adsManager?.setVolume(val);
+  }
+
+  play() {
+    this.#adsManager?.resume();
+    // todo: resolve on playing event
+    return Promise.resolve();
+  }
+
+  pause() {
+    this.#adsManager?.pause();
+  }
+
+  /**
+   * Initializes the ad display container video elements for playback.
+   * You must call this method as a direct result of a user action,
+   * so that the browser can mark the video element as user initiated.
+   */
+  initializeAdDisplayContainer() {
+    if (this.#initializedAdDisplayContainer) return;
+    this.#initializedAdDisplayContainer = true;
+    this.#adDisplayContainer?.initialize();
+  }
+
+  requestAds(adTagUrl: string) {
+    // Destroy the current AdsManager to prevent any previously requested post-roll ads from playing.
+    if (this.#adsManager) {
+      this.#adsManager.destroy();
+    }
+
+    // Reuse the existing AdsLoader instance initialized on page load.
+    if (this.#adsLoader) {
+      // Reset the IMA SDK.
+      this.#adsLoader.contentComplete();
+    }
+
+    const adsRequest = new google.ima.AdsRequest();
+    adsRequest.adTagUrl = adTagUrl;
+    this.#adsLoader?.requestAds(adsRequest);
+    this.dispatchEvent(new AdEvent(Events.AD_REQUEST));
+  }
+}
diff --git a/packages/mux-video/src/ads/mixin/index.ts b/packages/mux-video/src/ads/mixin/index.ts
new file mode 100644
index 000000000..134edc3d9
--- /dev/null
+++ b/packages/mux-video/src/ads/mixin/index.ts
@@ -0,0 +1,391 @@
+import { GoogleImaClientProvider } from './google-ima-client-provider';
+import type { CustomVideoElement } from 'custom-media-element';
+import { Events as AdEvents, AdEvent } from './events.js';
+import { Constructor, IAdsVideo } from './types.js';
+
+export * from './events.js';
+export * from './types.js';
+
+export const Attributes = {
+  AD_TAG_URL: 'ad-tag-url',
+  ALLOW_AD_BLOCKER: 'allow-ad-blocker',
+} as const;
+
+type VideoBackup = {
+  currentTime: number;
+};
+
+export function AdsVideoMixin<T extends CustomVideoElement>(superclass: T): Constructor<IAdsVideo> & T {
+  class AdsVideo extends superclass implements IAdsVideo {
+    static get observedAttributes() {
+      return [...super.observedAttributes, 'src', Attributes.AD_TAG_URL];
+    }
+
+    static get Events() {
+      // Filter out any duplicate events with a Set.
+      return [...new Set([...(super.Events ?? []), ...Object.values(AdEvents)])];
+    }
+
+    static getTemplateHTML = (attrs: Record<string, string>) => {
+      return (
+        super.getTemplateHTML(attrs) +
+        /*html*/ `
+          <style>
+            :host {
+              position: relative;
+            }
+
+            #ad-container {
+              position: absolute;
+              top: 0px;
+              left: 0px;
+              bottom: 0px;
+              right: 0px;
+              z-index: -1;
+              width: 100%;
+              height: 100%;
+            }
+
+            #ad-container.ad-break {
+              z-index: 0;
+            }
+
+            #ima-unavailable-message {
+              position: absolute;
+              inset: 0;
+              z-index: 10;
+              background: rgba(0, 0, 0, 0.75);
+              color: white;
+              font-size: 0.9em;
+              text-align: center;
+              line-height: 1.4;
+              align-items: center;
+              align-content: center;
+              cursor: not-allowed;
+            }
+
+            #ima-unavailable-message h4 {
+              font-size: 1rem;
+              margin: 0;
+            }
+          </style>
+          <div id="ad-container"></div>
+        `
+      );
+    };
+
+    #videoMetadataLoaded = false;
+    #oldAdTagUrl?: string | null;
+    #adProvider?: GoogleImaClientProvider;
+    #videoBackup?: VideoBackup;
+
+    connectedCallback() {
+      super.connectedCallback();
+
+      if (!GoogleImaClientProvider.isSDKAvailable()) {
+        console.error('Missing google.ima SDK. Make sure you include it via a script tag.');
+
+        if (!this.allowAdBlocker) {
+          this.#showAdBlockedMessage();
+        }
+        return;
+      }
+
+      if (!this.#adProvider) {
+        this.#adProvider = new GoogleImaClientProvider({
+          adContainer: this.#adContainer,
+          videoElement: this.nativeEl,
+          originalSize: this.getBoundingClientRect(),
+        });
+
+        for (const event of Object.values(AdEvents)) {
+          this.#adProvider.addEventListener(event, this);
+        }
+      }
+    }
+
+    attributeChangedCallback(attrName: string, oldValue?: string | null, newValue?: string | null): void {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+
+      if (attrName === 'src' && newValue !== oldValue) {
+        // If subsequent videos are loaded, reset the old ad tag url
+        // to allow the same ads to be requested for a new video.
+        // Don't use events to reset the state as they could be triggered
+        // if Google IMA reuses the same video element for ads.
+        this.#oldAdTagUrl = undefined;
+        this.#videoBackup = undefined;
+        this.#videoMetadataLoaded = false;
+      }
+
+      if (attrName === Attributes.AD_TAG_URL) {
+        this.#resetAds();
+      }
+    }
+
+    /**
+     * See https://github.com/muxinc/media-elements/blob/main/packages/custom-media-element/custom-media-element.ts#L345-L359
+     * In custom-media-element this method forwards events from the native video element to the custom element.
+     */
+    handleEvent(event: Event | AdEvent): void {
+      if (event instanceof AdEvent) {
+        this.#handleAdEvent(event);
+        return;
+      }
+
+      // If we are in an ad-break block the events from the native video element.
+      // This can happen when Google IMA reuses the same video element for ads.
+      if (this.#adProvider?.adBreak) {
+        return;
+      }
+
+      if (event.type === 'loadedmetadata') {
+        this.#onLoadedMetadata();
+      } else if (event.type === 'play') {
+        this.#onPlay();
+      }
+
+      super.handleEvent(event);
+    }
+
+    #onLoadedMetadata() {
+      this.#videoMetadataLoaded = true;
+      // When a new video is loaded, make sure we reset the ads.
+      this.#resetAds();
+    }
+
+    #onPlay() {
+      // Make sure the ads are reset before playing if needed.
+      this.#resetAds();
+      this.#adProvider?.initializeAdDisplayContainer();
+    }
+
+    #resetAds() {
+      if (this.adTagUrl) {
+        this.#requestAds();
+      } else {
+        this.#destroyAds();
+      }
+    }
+
+    async #requestAds() {
+      // The container element must be in the DOM to initialize the ad display container.
+      if (!this.adTagUrl || !this.isConnected) return;
+
+      // Wait until the video metadata has loaded before requesting ads to avoid unnecessary requests.
+      if (!this.#videoMetadataLoaded) return;
+
+      if (this.adTagUrl !== this.#oldAdTagUrl) {
+        this.#oldAdTagUrl = this.adTagUrl;
+        this.#adProvider?.requestAds(this.adTagUrl);
+      }
+    }
+
+    #destroyAds() {
+      this.#adProvider?.unload();
+      this.#oldAdTagUrl = undefined;
+    }
+
+    get #adContainer() {
+      return this.shadowRoot?.getElementById('ad-container') as HTMLElement;
+    }
+
+    #showAdBlockedMessage() {
+      if (this.shadowRoot?.querySelector('#ima-unavailable-message')) {
+        return;
+      }
+
+      this.#adContainer?.insertAdjacentHTML(
+        'afterend',
+        /* html */ `
+          <div id="ima-unavailable-message">
+            <h4>Ad experience unavailable.</h4>
+            <span>This may be due to a missing SDK, network issue, or ad blocker.</span>
+          </div>
+        `
+      );
+    }
+
+    #handleAdEvent(event: Event | AdEvent) {
+      if (event.type === AdEvents.AD_BREAK_START) {
+        this.#onAdBreakStart();
+        this.#dispatchAdEvent(AdEvents.DURATION_CHANGE);
+        this.#dispatchAdEvent(event.type);
+        return;
+      }
+
+      if (event.type === AdEvents.AD_BREAK_END) {
+        this.#onAdBreakEnd();
+        this.#dispatchAdEvent(AdEvents.DURATION_CHANGE);
+        this.#dispatchAdEvent(event.type);
+        return;
+      }
+
+      this.#dispatchAdEvent(event.type);
+    }
+
+    #dispatchAdEvent(eventType: string) {
+      // Composed events are forwarded to parent shadow hosts (e.g. mux-player).
+      this.dispatchEvent(new AdEvent(eventType, { composed: true }));
+    }
+
+    #onAdBreakStart() {
+      this.#adContainer?.classList.toggle('ad-break', true);
+
+      if (!this.ad?.isLinear()) {
+        return;
+      }
+
+      super.pause();
+
+      this.#videoBackup = {
+        currentTime: super.currentTime,
+      };
+    }
+
+    #onAdBreakEnd() {
+      this.#adContainer?.classList.toggle('ad-break', false);
+
+      if (this.#videoBackup?.currentTime) {
+        this.currentTime = this.#videoBackup.currentTime;
+      }
+
+      this.#videoBackup = undefined;
+
+      setTimeout(() => {
+        if (!super.ended) {
+          try {
+            this.play();
+          } catch {
+            // Ignore abort errors
+          }
+        }
+      }, 100);
+    }
+
+    play() {
+      if (!GoogleImaClientProvider.isSDKAvailable() && !this.allowAdBlocker) {
+        return Promise.reject(new Error('Playback failed: Ad experience not available'));
+      }
+      if (this.#adProvider?.adBreak) {
+        return this.#adProvider.play();
+      }
+      return super.play();
+    }
+
+    pause() {
+      if (this.#adProvider?.adBreak) {
+        this.#adProvider?.pause();
+      }
+      super.pause();
+    }
+
+    get ad() {
+      return this.#adProvider?.ad;
+    }
+
+    get adsLoader() {
+      if (!this.#adProvider) {
+        console.warn('adsLoader not available yet');
+      }
+      return this.#adProvider?.adsLoader;
+    }
+
+    get adTagUrl() {
+      return this.getAttribute(Attributes.AD_TAG_URL) ?? undefined;
+    }
+
+    set adTagUrl(value) {
+      if (value == this.adTagUrl) return;
+
+      if (value == null) {
+        this.removeAttribute(Attributes.AD_TAG_URL);
+      } else {
+        this.setAttribute(Attributes.AD_TAG_URL, value);
+      }
+    }
+
+    get allowAdBlocker() {
+      return this.hasAttribute(Attributes.ALLOW_AD_BLOCKER);
+    }
+
+    set allowAdBlocker(val) {
+      this.toggleAttribute(Attributes.ALLOW_AD_BLOCKER, Boolean(val));
+    }
+
+    get paused() {
+      if (this.#adProvider?.adBreak) {
+        return this.#adProvider?.paused ?? false;
+      }
+      return super.paused;
+    }
+
+    get duration() {
+      if (this.#adProvider?.adBreak) {
+        return this.#adProvider?.duration ?? 0;
+      }
+      return super.duration;
+    }
+
+    get currentTime() {
+      if (this.#adProvider?.adBreak) {
+        return this.#adProvider?.currentTime ?? 0;
+      }
+      return super.currentTime;
+    }
+
+    set currentTime(val) {
+      if (this.#adProvider?.adBreak) {
+        return;
+      }
+      super.currentTime = val;
+    }
+
+    get volume() {
+      if (this.#adProvider?.adBreak) {
+        return this.#adProvider?.volume ?? 0;
+      }
+      return super.volume;
+    }
+
+    set volume(val) {
+      if (this.#adProvider?.adBreak) {
+        if (this.#adProvider) {
+          this.#adProvider.volume = val;
+        }
+      }
+      super.volume = val;
+    }
+
+    get muted() {
+      if (this.#adProvider?.adBreak) {
+        return !this.#adProvider?.volume;
+      }
+      return super.muted;
+    }
+
+    set muted(val) {
+      if (this.#adProvider?.adBreak) {
+        if (this.#adProvider) {
+          this.#adProvider.volume = val ? 0 : this.volume;
+        }
+      }
+      super.muted = val;
+    }
+
+    get readyState() {
+      if (this.#adProvider?.adBreak) {
+        return 4;
+      }
+      return super.readyState;
+    }
+
+    async requestPictureInPicture(): Promise<PictureInPictureWindow> {
+      if (this.#adProvider?.adBreak) {
+        throw new Error('Cannot use PiP while ads are playing!');
+      }
+      return super.requestPictureInPicture();
+    }
+  }
+
+  return AdsVideo as unknown as Constructor<IAdsVideo> & T;
+}
diff --git a/packages/mux-video/src/ads/mixin/types.ts b/packages/mux-video/src/ads/mixin/types.ts
new file mode 100644
index 000000000..d755cffc4
--- /dev/null
+++ b/packages/mux-video/src/ads/mixin/types.ts
@@ -0,0 +1,99 @@
+import { Events, AdEvent } from './events.js';
+
+export type Constructor<T> = new (...args: any[]) => T;
+
+export type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+
+export type EventMapFromEvents<T extends Record<string, string>> = {
+  [K in T[keyof T]]: AdEvent;
+};
+
+export type EventMap = AdEventMap;
+export type AdEventMap = Expand<EventMapFromEvents<typeof Events>>;
+
+export declare class IAdsVideo {
+  /**
+   * Allow playback with ad blocker.
+   */
+  allowAdBlocker: boolean;
+
+  /**
+   * The URL of the ad tag to be requested.
+   */
+  adTagUrl: string | undefined;
+
+  /**
+   * The current ad being played.
+   */
+  ad: IAdsVideoClientAd | undefined;
+
+  /**
+   * The AdsLoader object that is used to request ads.
+   */
+  adsLoader: google.ima.AdsLoader | undefined;
+
+  addEventListener<K extends keyof AdEventMap>(
+    type: K,
+    listener: (this: HTMLMediaElement, ev: AdEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof AdEventMap>(
+    type: K,
+    listener: (this: HTMLMediaElement, ev: AdEventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+export declare class IAdsVideoClientAd {
+  /**
+   * Indicates whether the ad’s current mode of operation is linear or
+   * non-linear. If the value is true, it indicates that the ad is in linear
+   * playback mode; if false, it indicates non-linear mode. The player checks
+   * the linear property and updates its state according to the details of the
+   * ad placement. While the ad is in linear mode, the player pauses the
+   * content video. If linear is true initially, and the ad is a pre-roll
+   * (defined externally), the player may choose to delay loading the content
+   * video until near the end of the ad playback.
+   */
+  isLinear(): boolean;
+
+  /**
+   * Returns true if a custom video element is being used to play the current
+   * ad. Custom playback occurs when an optional video element is provided to
+   * the <code>AdDisplayContainer</code> on platforms where a custom video
+   * element would provide a more seamless ad viewing experience.
+   */
+  isCustomPlaybackUsed(): boolean;
+}
+
+export declare class IAdsVideoClientProvider extends EventTarget {
+  get adsLoader(): google.ima.AdsLoader | undefined;
+  get ad(): IAdsVideoClientAd | undefined;
+  get adBreak(): boolean;
+
+  get paused(): boolean;
+  get duration(): number;
+  get currentTime(): number;
+  get volume(): number;
+  set volume(val: number);
+
+  initializeAdDisplayContainer(): void;
+  requestAds(adTagUrl: string): void;
+  play(): Promise<void>;
+  pause(): void;
+  unload(): void;
+  destroy(): void;
+
+  addEventListener<K extends keyof AdEventMap>(
+    type: K,
+    listener: (this: IAdsVideoClientProvider, ev: AdEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof AdEventMap>(
+    type: K,
+    listener: (this: IAdsVideoClientProvider, ev: AdEventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
diff --git a/packages/mux-video/src/ads/react.ts b/packages/mux-video/src/ads/react.ts
new file mode 100644
index 000000000..f8071d143
--- /dev/null
+++ b/packages/mux-video/src/ads/react.ts
@@ -0,0 +1,29 @@
+'use client';
+
+import MuxVideoElement from '@mux/mux-video/ads';
+import React from 'react';
+// keep as last import, ce-la-react is bundled.
+import { createComponent } from 'ce-la-react';
+
+export default createComponent({
+  react: React,
+  tagName: 'mux-video',
+  elementClass: MuxVideoElement,
+  toAttributeName,
+});
+
+const ReactPropToAttrNameMap: Record<string, string> = {
+  autoPlay: 'autoplay',
+  controlsList: 'controlslist',
+  crossOrigin: 'crossorigin',
+  playsInline: 'playsinline',
+  disablePictureInPicture: 'disablepictureinpicture',
+  disableRemotePlayback: 'disableremoteplayback',
+};
+
+function toAttributeName(propName: string) {
+  if (ReactPropToAttrNameMap[propName]) {
+    return ReactPropToAttrNameMap[propName];
+  }
+  return propName.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
diff --git a/packages/mux-video/src/base.ts b/packages/mux-video/src/base.ts
new file mode 100644
index 000000000..c8b2cbf24
--- /dev/null
+++ b/packages/mux-video/src/base.ts
@@ -0,0 +1,856 @@
+import {
+  initialize,
+  teardown,
+  generatePlayerInitTime,
+  MuxMediaProps,
+  StreamTypes,
+  PlaybackTypes,
+  toMuxVideoURL,
+  Metadata,
+  MediaError,
+  getError,
+  CmcdTypes,
+  CmcdTypeValues,
+  addCuePoints,
+  getCuePoints,
+  getActiveCuePoint,
+  addChapters,
+  getActiveChapter,
+  getStartDate,
+  getCurrentPdt,
+  getStreamType,
+  getTargetLiveWindow,
+  getLiveEdgeStart,
+  getSeekable,
+  getEnded,
+  getChapters,
+  toPlaybackIdFromSrc,
+  toPlaybackIdParts,
+  // isMuxVideoSrc,
+} from '@mux/playback-core';
+import type {
+  PlaybackCore,
+  PlaybackEngine,
+  ExtensionMimeTypeMap,
+  ValueOf,
+  MaxResolutionValue,
+  MinResolutionValue,
+  RenditionOrderValue,
+  Chapter,
+  CuePoint,
+  Tokens,
+} from '@mux/playback-core';
+import { getPlayerVersion } from './env';
+// this must be imported after playback-core for the polyfill to be included
+import { CustomVideoElement, Events } from 'custom-media-element';
+import type { HlsConfig } from 'hls.js';
+import { muxLogo } from './assets/mux-logo.js';
+import type { IMuxVideoBaseElement } from './types.js';
+
+export * from './types.js';
+
+export const Attributes = {
+  BEACON_COLLECTION_DOMAIN: 'beacon-collection-domain',
+  CUSTOM_DOMAIN: 'custom-domain',
+  DEBUG: 'debug',
+  DISABLE_TRACKING: 'disable-tracking',
+  DISABLE_COOKIES: 'disable-cookies',
+  DRM_TOKEN: 'drm-token',
+  PLAYBACK_TOKEN: 'playback-token',
+  ENV_KEY: 'env-key',
+  MAX_RESOLUTION: 'max-resolution',
+  MIN_RESOLUTION: 'min-resolution',
+  RENDITION_ORDER: 'rendition-order',
+  PROGRAM_START_TIME: 'program-start-time',
+  PROGRAM_END_TIME: 'program-end-time',
+  ASSET_START_TIME: 'asset-start-time',
+  ASSET_END_TIME: 'asset-end-time',
+  METADATA_URL: 'metadata-url',
+  PLAYBACK_ID: 'playback-id',
+  PLAYER_SOFTWARE_NAME: 'player-software-name',
+  PLAYER_SOFTWARE_VERSION: 'player-software-version',
+  PLAYER_INIT_TIME: 'player-init-time',
+  PREFER_CMCD: 'prefer-cmcd',
+  PREFER_PLAYBACK: 'prefer-playback',
+  START_TIME: 'start-time',
+  STREAM_TYPE: 'stream-type',
+  TARGET_LIVE_WINDOW: 'target-live-window',
+  LIVE_EDGE_OFFSET: 'live-edge-offset',
+  TYPE: 'type',
+  LOGO: 'logo',
+} as const;
+
+const AttributeNameValues = Object.values(Attributes);
+
+export const playerSoftwareVersion = getPlayerVersion();
+export const playerSoftwareName = 'mux-video';
+
+export class MuxVideoBaseElement extends CustomVideoElement implements IMuxVideoBaseElement {
+  static get NAME() {
+    return playerSoftwareName;
+  }
+
+  static get VERSION() {
+    return playerSoftwareVersion;
+  }
+
+  static get observedAttributes() {
+    return [...AttributeNameValues, ...(CustomVideoElement.observedAttributes ?? [])];
+  }
+
+  #core?: PlaybackCore;
+  #loadRequested?: Promise<void> | null;
+  #defaultPlayerInitTime: number;
+  #metadata: Readonly<Metadata> = {};
+  #tokens: Tokens = {};
+  #_hlsConfig?: Partial<HlsConfig>;
+  #playerSoftwareVersion?: string;
+  #playerSoftwareName?: string;
+  #errorTranslator?: (errorEvent: any) => any;
+
+  static getTemplateHTML(attrs: Record<string, string> = {}) {
+    const template = super.getTemplateHTML(attrs);
+    const showLogo = attrs['logo'] !== 'false' && attrs['logo'] !== undefined;
+    const hasLogoSrc = attrs['logo'] && attrs['logo'] !== '';
+    const logoSrc = attrs['logo'];
+
+    const logoTemplate = showLogo
+      ? `
+      <style>
+        :host {
+          position: relative;
+        }
+        :host slot[name="logo"] {
+          display: flex;
+          justify-content: end;
+          position: absolute;
+          top: 1rem;
+          right: 1rem;
+
+        }
+         :host slot[name="logo"] .logo{
+          width: 5rem;
+          pointer-events: none;
+          user-select: none;
+         }
+      </style>
+      <slot name="logo">
+        ${hasLogoSrc ? `<img class="logo" part="logo" src="${logoSrc}" />` : muxLogo}
+      </slot>
+    `
+      : '';
+
+    return `
+      ${template}
+      ${logoTemplate}
+    `;
+  }
+  constructor() {
+    super();
+    this.#defaultPlayerInitTime = generatePlayerInitTime();
+  }
+
+  get preferCmcd() {
+    return (this.getAttribute(Attributes.PREFER_CMCD) as ValueOf<CmcdTypes>) ?? undefined;
+  }
+
+  set preferCmcd(value: ValueOf<CmcdTypes> | undefined) {
+    if (value === this.preferCmcd) return;
+    if (!value) {
+      this.removeAttribute(Attributes.PREFER_CMCD);
+    } else if (CmcdTypeValues.includes(value)) {
+      this.setAttribute(Attributes.PREFER_CMCD, value);
+    } else {
+      console.warn(`Invalid value for preferCmcd. Must be one of ${CmcdTypeValues.join()}`);
+    }
+  }
+
+  get playerInitTime() {
+    if (!this.hasAttribute(Attributes.PLAYER_INIT_TIME)) return this.#defaultPlayerInitTime;
+    return +(this.getAttribute(Attributes.PLAYER_INIT_TIME) as string) as number;
+  }
+
+  set playerInitTime(val) {
+    // don't cause an infinite loop and avoid change event dispatching
+    if (val == this.playerInitTime) return;
+
+    if (val == null) {
+      this.removeAttribute(Attributes.PLAYER_INIT_TIME);
+    } else {
+      this.setAttribute(Attributes.PLAYER_INIT_TIME, `${+val}`);
+    }
+  }
+
+  get playerSoftwareName() {
+    return this.#playerSoftwareName ?? playerSoftwareName;
+  }
+
+  set playerSoftwareName(value: string | undefined) {
+    this.#playerSoftwareName = value;
+  }
+
+  get playerSoftwareVersion() {
+    return this.#playerSoftwareVersion ?? playerSoftwareVersion;
+  }
+
+  set playerSoftwareVersion(value: string | undefined) {
+    this.#playerSoftwareVersion = value;
+  }
+
+  // Keeping this named "_hls" since it's exposed for unadvertised "advanced usage" via getter that assumes specifically hls.js (CJP)
+  get _hls(): PlaybackEngine | undefined {
+    return this.#core?.engine;
+  }
+
+  get mux(): Readonly<HTMLVideoElement['mux']> | undefined {
+    return this.nativeEl?.mux;
+  }
+
+  get error() {
+    return getError(this.nativeEl) ?? null;
+  }
+
+  get errorTranslator(): ((errorEvent: any) => any) | undefined {
+    return this.#errorTranslator;
+  }
+
+  set errorTranslator(value: ((errorEvent: any) => any) | undefined) {
+    this.#errorTranslator = value;
+  }
+
+  get src() {
+    // Use the attribute value as the source of truth.
+    // No need to store it in two places.
+    // This avoids needing a to read the attribute initially and update the src.
+    return this.getAttribute('src') as string;
+  }
+
+  set src(val: string) {
+    // If being set by attributeChangedCallback,
+    // dont' cause an infinite loop
+    if (val === this.src) return;
+
+    if (val == null) {
+      this.removeAttribute('src');
+    } else {
+      this.setAttribute('src', val);
+    }
+  }
+
+  get type(): ValueOf<ExtensionMimeTypeMap> | undefined {
+    return (this.getAttribute(Attributes.TYPE) as ValueOf<ExtensionMimeTypeMap>) ?? undefined;
+  }
+
+  set type(val: ValueOf<ExtensionMimeTypeMap> | undefined) {
+    // dont' cause an infinite loop
+    if (val === this.type) return;
+
+    if (val) {
+      this.setAttribute(Attributes.TYPE, val);
+    } else {
+      this.removeAttribute(Attributes.TYPE);
+    }
+  }
+
+  get preload() {
+    const val = this.getAttribute('preload') as HTMLMediaElement['preload'];
+    if (val === '') return 'auto';
+    if (['none', 'metadata', 'auto'].includes(val)) return val;
+    return super.preload;
+  }
+
+  set preload(val) {
+    // don't cause an infinite loop
+    // check the attribute because an empty string maps to the `auto` prop
+    if (val == this.getAttribute('preload')) return;
+
+    if (['', 'none', 'metadata', 'auto'].includes(val)) {
+      this.setAttribute('preload', val);
+    } else {
+      this.removeAttribute('preload');
+    }
+  }
+
+  get debug() {
+    return this.getAttribute(Attributes.DEBUG) != null;
+  }
+
+  set debug(val) {
+    // dont' cause an infinite loop
+    if (val === this.debug) return;
+
+    if (val) {
+      this.setAttribute(Attributes.DEBUG, '');
+    } else {
+      this.removeAttribute(Attributes.DEBUG);
+    }
+  }
+
+  get disableTracking() {
+    return this.hasAttribute(Attributes.DISABLE_TRACKING);
+  }
+
+  set disableTracking(val) {
+    // dont' cause an infinite loop
+    if (val === this.disableTracking) return;
+
+    this.toggleAttribute(Attributes.DISABLE_TRACKING, !!val);
+  }
+
+  get disableCookies() {
+    return this.hasAttribute(Attributes.DISABLE_COOKIES);
+  }
+
+  set disableCookies(val) {
+    // dont' cause an infinite loop
+    if (val === this.disableCookies) return;
+
+    if (val) {
+      this.setAttribute(Attributes.DISABLE_COOKIES, '');
+    } else {
+      this.removeAttribute(Attributes.DISABLE_COOKIES);
+    }
+  }
+
+  get startTime(): number | undefined {
+    const val = this.getAttribute(Attributes.START_TIME);
+    if (val == null) return undefined;
+    const num = +val;
+    return !Number.isNaN(num) ? num : undefined;
+  }
+
+  set startTime(val: number | undefined) {
+    // dont' cause an infinite loop
+    if (val === this.startTime) return;
+
+    if (val == null) {
+      this.removeAttribute(Attributes.START_TIME);
+    } else {
+      this.setAttribute(Attributes.START_TIME, `${val}`);
+    }
+  }
+
+  // NOTE: playbackId may contain additional query params (e.g. token= for playback token) (CJP)
+  get playbackId(): string | undefined {
+    if (this.hasAttribute(Attributes.PLAYBACK_ID)) {
+      return this.getAttribute(Attributes.PLAYBACK_ID) as string;
+    }
+
+    return toPlaybackIdFromSrc(this.src) ?? undefined;
+  }
+
+  set playbackId(val: string | undefined) {
+    // dont' cause an infinite loop
+    if (val === this.playbackId) return;
+
+    if (val) {
+      this.setAttribute(Attributes.PLAYBACK_ID, val);
+    } else {
+      this.removeAttribute(Attributes.PLAYBACK_ID);
+    }
+  }
+
+  get maxResolution() {
+    return (this.getAttribute(Attributes.MAX_RESOLUTION) as MaxResolutionValue) ?? undefined;
+  }
+
+  set maxResolution(val: MaxResolutionValue | undefined) {
+    if (val === this.maxResolution) return;
+
+    if (val) {
+      this.setAttribute(Attributes.MAX_RESOLUTION, val);
+    } else {
+      this.removeAttribute(Attributes.MAX_RESOLUTION);
+    }
+  }
+
+  get minResolution() {
+    return (this.getAttribute(Attributes.MIN_RESOLUTION) as MinResolutionValue) ?? undefined;
+  }
+
+  set minResolution(val: MinResolutionValue | undefined) {
+    if (val === this.minResolution) return;
+
+    if (val) {
+      this.setAttribute(Attributes.MIN_RESOLUTION, val);
+    } else {
+      this.removeAttribute(Attributes.MIN_RESOLUTION);
+    }
+  }
+
+  get renditionOrder() {
+    return (this.getAttribute(Attributes.RENDITION_ORDER) as RenditionOrderValue) ?? undefined;
+  }
+
+  set renditionOrder(val: RenditionOrderValue | undefined) {
+    if (val === this.renditionOrder) return;
+
+    if (val) {
+      this.setAttribute(Attributes.RENDITION_ORDER, val);
+    } else {
+      this.removeAttribute(Attributes.RENDITION_ORDER);
+    }
+  }
+
+  get programStartTime() {
+    const val = this.getAttribute(Attributes.PROGRAM_START_TIME);
+    if (val == null) return undefined;
+    const num = +val;
+    return !Number.isNaN(num) ? num : undefined;
+  }
+
+  set programStartTime(val: number | undefined) {
+    if (val == undefined) {
+      this.removeAttribute(Attributes.PROGRAM_START_TIME);
+    } else {
+      this.setAttribute(Attributes.PROGRAM_START_TIME, `${val}`);
+    }
+  }
+
+  get programEndTime() {
+    const val = this.getAttribute(Attributes.PROGRAM_END_TIME);
+    if (val == null) return undefined;
+    const num = +val;
+    return !Number.isNaN(num) ? num : undefined;
+  }
+
+  set programEndTime(val: number | undefined) {
+    if (val == undefined) {
+      this.removeAttribute(Attributes.PROGRAM_END_TIME);
+    } else {
+      this.setAttribute(Attributes.PROGRAM_END_TIME, `${val}`);
+    }
+  }
+
+  get assetStartTime() {
+    const val = this.getAttribute(Attributes.ASSET_START_TIME);
+    if (val == null) return undefined;
+    const num = +val;
+    return !Number.isNaN(num) ? num : undefined;
+  }
+
+  set assetStartTime(val: number | undefined) {
+    if (val == undefined) {
+      this.removeAttribute(Attributes.ASSET_START_TIME);
+    } else {
+      this.setAttribute(Attributes.ASSET_START_TIME, `${val}`);
+    }
+  }
+
+  get assetEndTime() {
+    const val = this.getAttribute(Attributes.ASSET_END_TIME);
+    if (val == null) return undefined;
+    const num = +val;
+    return !Number.isNaN(num) ? num : undefined;
+  }
+
+  set assetEndTime(val: number | undefined) {
+    if (val == undefined) {
+      this.removeAttribute(Attributes.ASSET_END_TIME);
+    } else {
+      this.setAttribute(Attributes.ASSET_END_TIME, `${val}`);
+    }
+  }
+
+  get customDomain() {
+    return this.getAttribute(Attributes.CUSTOM_DOMAIN) ?? undefined;
+  }
+
+  set customDomain(val: string | undefined) {
+    // dont' cause an infinite loop
+    if (val === this.customDomain) return;
+
+    if (val) {
+      this.setAttribute(Attributes.CUSTOM_DOMAIN, val);
+    } else {
+      this.removeAttribute(Attributes.CUSTOM_DOMAIN);
+    }
+  }
+
+  get drmToken() {
+    return this.getAttribute(Attributes.DRM_TOKEN) ?? undefined;
+  }
+
+  set drmToken(val: string | undefined) {
+    // dont' cause an infinite loop
+    if (val === this.drmToken) return;
+
+    if (val) {
+      this.setAttribute(Attributes.DRM_TOKEN, val);
+    } else {
+      this.removeAttribute(Attributes.DRM_TOKEN);
+    }
+  }
+
+  /**
+   * Get the playback token for signing the src URL.
+   */
+  get playbackToken() {
+    if (this.hasAttribute(Attributes.PLAYBACK_TOKEN)) {
+      return this.getAttribute(Attributes.PLAYBACK_TOKEN) ?? undefined;
+    }
+    if (this.hasAttribute(Attributes.PLAYBACK_ID)) {
+      const [, queryParts] = toPlaybackIdParts(this.playbackId ?? '');
+      return new URLSearchParams(queryParts).get('token') ?? undefined;
+    }
+    if (this.src) {
+      return new URLSearchParams(this.src).get('token') ?? undefined;
+    }
+    return undefined;
+  }
+
+  /**
+   * Set the playback token for signing the src URL.
+   */
+  set playbackToken(val: string | undefined) {
+    if (val === this.playbackToken) return;
+
+    if (val) {
+      this.setAttribute(Attributes.PLAYBACK_TOKEN, val);
+    } else {
+      this.removeAttribute(Attributes.PLAYBACK_TOKEN);
+    }
+  }
+
+  get tokens() {
+    const playback = this.getAttribute(Attributes.PLAYBACK_TOKEN);
+    const drm = this.getAttribute(Attributes.DRM_TOKEN);
+    return {
+      ...this.#tokens,
+      ...(playback != null ? { playback } : {}),
+      ...(drm != null ? { drm } : {}),
+    };
+  }
+
+  set tokens(val) {
+    this.#tokens = val ?? {};
+  }
+
+  get ended() {
+    // This ensures that edge case media that doesn't properly end will
+    // still announce itself as "ended".
+    return getEnded(this.nativeEl, this._hls);
+  }
+
+  get envKey(): string | undefined {
+    return this.getAttribute(Attributes.ENV_KEY) ?? undefined;
+  }
+
+  set envKey(val: string | undefined) {
+    // dont' cause an infinite loop
+    if (val === this.envKey) return;
+
+    if (val) {
+      this.setAttribute(Attributes.ENV_KEY, val);
+    } else {
+      this.removeAttribute(Attributes.ENV_KEY);
+    }
+  }
+
+  get beaconCollectionDomain(): string | undefined {
+    return this.getAttribute(Attributes.BEACON_COLLECTION_DOMAIN) ?? undefined;
+  }
+
+  set beaconCollectionDomain(val: string | undefined) {
+    // don't cause an infinite loop
+    if (val === this.beaconCollectionDomain) return;
+
+    if (val) {
+      this.setAttribute(Attributes.BEACON_COLLECTION_DOMAIN, val);
+    } else {
+      this.removeAttribute(Attributes.BEACON_COLLECTION_DOMAIN);
+    }
+  }
+
+  get streamType(): ValueOf<StreamTypes> | undefined {
+    // Allow overriding inferred `streamType`
+    return (this.getAttribute(Attributes.STREAM_TYPE) as ValueOf<StreamTypes>) ?? getStreamType(this.nativeEl);
+  }
+
+  set streamType(val: ValueOf<StreamTypes> | undefined) {
+    // don't cause an infinite loop and avoid change event dispatching
+    if (val === this.streamType) return;
+
+    if (val) {
+      this.setAttribute(Attributes.STREAM_TYPE, val);
+    } else {
+      this.removeAttribute(Attributes.STREAM_TYPE);
+    }
+  }
+
+  get targetLiveWindow() {
+    // Allow overriding inferred `targetLiveWindow`
+    if (this.hasAttribute(Attributes.TARGET_LIVE_WINDOW)) {
+      return +(this.getAttribute(Attributes.TARGET_LIVE_WINDOW) as string) as number;
+    }
+    return getTargetLiveWindow(this.nativeEl);
+  }
+
+  set targetLiveWindow(val: number | undefined) {
+    // don't cause an infinite loop and avoid change event dispatching
+    if (val == this.targetLiveWindow) return;
+
+    if (val == null) {
+      this.removeAttribute(Attributes.TARGET_LIVE_WINDOW);
+    } else {
+      this.setAttribute(Attributes.TARGET_LIVE_WINDOW, `${+val}`);
+    }
+  }
+
+  get liveEdgeStart() {
+    if (this.hasAttribute(Attributes.LIVE_EDGE_OFFSET)) {
+      const { liveEdgeOffset } = this;
+      const seekableEnd = this.nativeEl.seekable.end(0) ?? 0;
+      const seekableStart = this.nativeEl.seekable.start(0) ?? 0;
+      return Math.max(seekableStart, seekableEnd - (liveEdgeOffset as number));
+    }
+    return getLiveEdgeStart(this.nativeEl);
+  }
+
+  get liveEdgeOffset() {
+    if (!this.hasAttribute(Attributes.LIVE_EDGE_OFFSET)) return undefined;
+    return +(this.getAttribute(Attributes.LIVE_EDGE_OFFSET) as string) as number;
+  }
+
+  set liveEdgeOffset(val: number | undefined) {
+    // don't cause an infinite loop and avoid change event dispatching
+    if (val == this.liveEdgeOffset) return;
+
+    if (val == null) {
+      this.removeAttribute(Attributes.LIVE_EDGE_OFFSET);
+    } else {
+      this.setAttribute(Attributes.LIVE_EDGE_OFFSET, `${+val}`);
+    }
+  }
+
+  get seekable() {
+    return getSeekable(this.nativeEl);
+  }
+
+  async addCuePoints<T = any>(cuePoints: CuePoint<T>[]) {
+    return addCuePoints(this.nativeEl, cuePoints);
+  }
+
+  get activeCuePoint() {
+    return getActiveCuePoint(this.nativeEl);
+  }
+
+  get cuePoints() {
+    return getCuePoints(this.nativeEl);
+  }
+
+  async addChapters(chapters: Chapter[]) {
+    return addChapters(this.nativeEl, chapters);
+  }
+
+  get activeChapter() {
+    return getActiveChapter(this.nativeEl);
+  }
+
+  get chapters() {
+    return getChapters(this.nativeEl);
+  }
+
+  getStartDate() {
+    return getStartDate(this.nativeEl, this._hls);
+  }
+
+  get currentPdt() {
+    return getCurrentPdt(this.nativeEl, this._hls);
+  }
+
+  get preferPlayback(): ValueOf<PlaybackTypes> | undefined {
+    const val = this.getAttribute(Attributes.PREFER_PLAYBACK);
+    if (val === PlaybackTypes.MSE || val === PlaybackTypes.NATIVE) return val;
+    return undefined;
+  }
+
+  set preferPlayback(val: ValueOf<PlaybackTypes> | undefined) {
+    if (val === this.preferPlayback) return;
+
+    if (val === PlaybackTypes.MSE || val === PlaybackTypes.NATIVE) {
+      this.setAttribute(Attributes.PREFER_PLAYBACK, val);
+    } else {
+      this.removeAttribute(Attributes.PREFER_PLAYBACK);
+    }
+  }
+
+  get metadata() {
+    const inferredMetadataAttrs: { [key: string]: string } = this.getAttributeNames()
+      .filter((attrName) => {
+        return attrName.startsWith('metadata-') && !([Attributes.METADATA_URL] as string[]).includes(attrName);
+      })
+      .reduce(
+        (currAttrs, attrName) => {
+          const value = this.getAttribute(attrName);
+          if (value != null) {
+            currAttrs[attrName.replace(/^metadata-/, '').replace(/-/g, '_') as string] = value;
+          }
+          return currAttrs;
+        },
+        {} as { [key: string]: string }
+      );
+
+    return {
+      ...inferredMetadataAttrs,
+      ...this.#metadata,
+    };
+  }
+
+  set metadata(val: Readonly<Metadata> | undefined) {
+    this.#metadata = val ?? {};
+    if (!!this.mux) {
+      this.mux.emit('hb', this.#metadata);
+    }
+  }
+
+  get _hlsConfig() {
+    return this.#_hlsConfig;
+  }
+
+  set _hlsConfig(val: Readonly<Partial<HlsConfig>> | undefined) {
+    this.#_hlsConfig = val;
+  }
+
+  get logo() {
+    return this.getAttribute(Attributes.LOGO);
+  }
+
+  set logo(val) {
+    if (val) {
+      this.setAttribute(Attributes.LOGO, val);
+    } else {
+      this.removeAttribute(Attributes.LOGO);
+    }
+  }
+
+  async #requestLoad() {
+    if (this.#loadRequested) return;
+    await (this.#loadRequested = Promise.resolve());
+    this.#loadRequested = null;
+    this.load();
+  }
+
+  load() {
+    this.#core = initialize(this as Partial<MuxMediaProps>, this.nativeEl, this.#core);
+  }
+
+  unload() {
+    teardown(this.nativeEl, this.#core, this as Partial<MuxMediaProps>);
+    this.#core = undefined;
+  }
+
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null) {
+    // Only forward the attributes to the native media element that are not handled.
+    const isNativeAttr = CustomVideoElement.observedAttributes.includes(attrName);
+    if (isNativeAttr && !['src', 'autoplay', 'preload'].includes(attrName)) {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+    }
+
+    switch (attrName) {
+      case Attributes.PLAYER_SOFTWARE_NAME:
+        this.playerSoftwareName = newValue ?? undefined;
+        break;
+      case Attributes.PLAYER_SOFTWARE_VERSION:
+        this.playerSoftwareVersion = newValue ?? undefined;
+        break;
+      case 'src': {
+        const hadSrc = !!oldValue;
+        const hasSrc = !!newValue;
+        if (!hadSrc && hasSrc) {
+          this.#requestLoad();
+        } else if (hadSrc && !hasSrc) {
+          this.unload();
+        } else if (hadSrc && hasSrc) {
+          this.unload();
+          this.#requestLoad();
+        }
+        break;
+      }
+      case 'autoplay':
+        if (newValue === oldValue) {
+          break;
+        }
+        /** In case newValue is an empty string or null, use this.autoplay which translates to booleans (WL) */
+        this.#core?.setAutoplay(this.autoplay);
+        break;
+      case 'preload':
+        if (newValue === oldValue) {
+          break;
+        }
+        this.#core?.setPreload(newValue as HTMLMediaElement['preload']);
+        break;
+      case Attributes.PLAYBACK_ID:
+        this.src = toMuxVideoURL(this) as string;
+        break;
+      case Attributes.DEBUG: {
+        const debug = this.debug;
+        if (!!this.mux) {
+          /** @TODO Link to docs for a more detailed discussion (CJP) */
+          console.info(
+            'Cannot toggle debug mode of mux data after initialization. Make sure you set all metadata to override before setting the src.'
+          );
+        }
+        if (!!this._hls) {
+          this._hls.config.debug = debug;
+        }
+        break;
+      }
+      case Attributes.METADATA_URL:
+        if (newValue) {
+          fetch(newValue)
+            .then((resp) => resp.json())
+            .then((json) => (this.metadata = json))
+            .catch(() => console.error(`Unable to load or parse metadata JSON from metadata-url ${newValue}!`));
+        }
+        break;
+      case Attributes.STREAM_TYPE:
+        // If the newValue is unset
+        if (newValue == null || newValue !== oldValue) {
+          this.dispatchEvent(new CustomEvent('streamtypechange', { composed: true, bubbles: true }));
+        }
+        break;
+      case Attributes.TARGET_LIVE_WINDOW:
+        if (newValue == null || newValue !== oldValue) {
+          this.dispatchEvent(
+            new CustomEvent('targetlivewindowchange', { composed: true, bubbles: true, detail: this.targetLiveWindow })
+          );
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback?.();
+    if (this.nativeEl && this.src && !this.#core) {
+      this.#requestLoad();
+    }
+  }
+
+  disconnectedCallback(): void {
+    this.unload();
+  }
+
+  handleEvent(event: Event): void {
+    if (event.target === this.nativeEl) {
+      // Composed events are forwarded to parent shadow hosts (e.g. mux-player).
+      this.dispatchEvent(
+        new CustomEvent(event.type, {
+          composed: true,
+          detail: (event as CustomEvent).detail,
+        })
+      );
+    }
+  }
+}
+
+export {
+  PlaybackEngine,
+  PlaybackEngine as Hls,
+  ExtensionMimeTypeMap as MimeTypes,
+  MediaError,
+  Events,
+  generatePlayerInitTime,
+};
diff --git a/packages/mux-video/src/index.ts b/packages/mux-video/src/index.ts
index c07f97e06..a7c7d8a3c 100644
--- a/packages/mux-video/src/index.ts
+++ b/packages/mux-video/src/index.ts
@@ -1,258 +1,15 @@
 import { globalThis } from './polyfills';
-import {
-  initialize,
-  teardown,
-  generatePlayerInitTime,
-  MuxMediaProps,
-  StreamTypes,
-  PlaybackTypes,
-  toMuxVideoURL,
-  Metadata,
-  MediaError,
-  getError,
-  CmcdTypes,
-  CmcdTypeValues,
-  addCuePoints,
-  getCuePoints,
-  getActiveCuePoint,
-  addChapters,
-  getActiveChapter,
-  getStartDate,
-  getCurrentPdt,
-  getStreamType,
-  getTargetLiveWindow,
-  getLiveEdgeStart,
-  getSeekable,
-  getEnded,
-  getChapters,
-  toPlaybackIdFromSrc,
-  toPlaybackIdParts,
-  // isMuxVideoSrc,
-} from '@mux/playback-core';
-import type {
-  PlaybackCore,
-  PlaybackEngine,
-  Autoplay,
-  ExtensionMimeTypeMap,
-  ValueOf,
-  MaxResolutionValue,
-  MinResolutionValue,
-  RenditionOrderValue,
-  Chapter,
-  CuePoint,
-  Tokens,
-} from '@mux/playback-core';
-import { getPlayerVersion } from './env';
-// this must be imported after playback-core for the polyfill to be included
-import { CustomVideoElement, Events as VideoEvents } from 'custom-media-element';
+import { Autoplay } from '@mux/playback-core';
+import { MuxVideoBaseElement } from '@mux/mux-video/base';
 import { CastableMediaMixin } from 'castable-video/castable-mixin.js';
 import { MediaTracksMixin } from 'media-tracks';
-import type { HlsConfig } from 'hls.js';
-import { muxLogo } from './assets/mux-logo.js';
 
-export const Attributes = {
-  BEACON_COLLECTION_DOMAIN: 'beacon-collection-domain',
-  CUSTOM_DOMAIN: 'custom-domain',
-  DEBUG: 'debug',
-  DISABLE_TRACKING: 'disable-tracking',
-  DISABLE_COOKIES: 'disable-cookies',
-  DRM_TOKEN: 'drm-token',
-  PLAYBACK_TOKEN: 'playback-token',
-  ENV_KEY: 'env-key',
-  MAX_RESOLUTION: 'max-resolution',
-  MIN_RESOLUTION: 'min-resolution',
-  RENDITION_ORDER: 'rendition-order',
-  PROGRAM_START_TIME: 'program-start-time',
-  PROGRAM_END_TIME: 'program-end-time',
-  ASSET_START_TIME: 'asset-start-time',
-  ASSET_END_TIME: 'asset-end-time',
-  METADATA_URL: 'metadata-url',
-  PLAYBACK_ID: 'playback-id',
-  PLAYER_SOFTWARE_NAME: 'player-software-name',
-  PLAYER_SOFTWARE_VERSION: 'player-software-version',
-  PLAYER_INIT_TIME: 'player-init-time',
-  PREFER_CMCD: 'prefer-cmcd',
-  PREFER_PLAYBACK: 'prefer-playback',
-  START_TIME: 'start-time',
-  STREAM_TYPE: 'stream-type',
-  TARGET_LIVE_WINDOW: 'target-live-window',
-  LIVE_EDGE_OFFSET: 'live-edge-offset',
-  TYPE: 'type',
-  LOGO: 'logo',
-} as const;
-
-const AttributeNameValues = Object.values(Attributes);
-
-export const playerSoftwareVersion = getPlayerVersion();
-export const playerSoftwareName = 'mux-video';
-
-class MuxVideoBaseElement extends CustomVideoElement implements Partial<MuxMediaProps> {
-  static get NAME() {
-    return playerSoftwareName;
-  }
-
-  static get VERSION() {
-    return playerSoftwareVersion;
-  }
-
-  static get observedAttributes() {
-    return [...AttributeNameValues, ...(CustomVideoElement.observedAttributes ?? [])];
-  }
-
-  #core?: PlaybackCore;
-  #loadRequested?: Promise<void> | null;
-  #defaultPlayerInitTime: number;
-  #metadata: Readonly<Metadata> = {};
-  #tokens: Tokens = {};
-  #_hlsConfig?: Partial<HlsConfig>;
-  #playerSoftwareVersion?: string;
-  #playerSoftwareName?: string;
-  #errorTranslator?: (errorEvent: any) => any;
-
-  static getTemplateHTML(attrs: Record<string, string> = {}) {
-    const template = super.getTemplateHTML(attrs);
-    const showLogo = attrs['logo'] !== 'false' && attrs['logo'] !== undefined;
-    const hasLogoSrc = attrs['logo'] && attrs['logo'] !== '';
-    const logoSrc = attrs['logo'];
-
-    const logoTemplate = showLogo
-      ? `
-      <style>
-        :host {
-          position: relative;
-        }
-        :host slot[name="logo"] {
-          display: flex;
-          justify-content: end;
-          position: absolute;
-          top: 1rem;
-          right: 1rem;
-
-        }
-         :host slot[name="logo"] .logo{
-          width: 5rem;
-          pointer-events: none;
-          user-select: none;
-         }
-      </style>
-      <slot name="logo">
-        ${hasLogoSrc ? `<img class="logo" part="logo" src="${logoSrc}" />` : muxLogo}
-      </slot>
-    `
-      : '';
-
-    return `
-      ${template}
-      ${logoTemplate}
-    `;
-  }
-  constructor() {
-    super();
-    this.#defaultPlayerInitTime = generatePlayerInitTime();
-  }
-
-  get preferCmcd() {
-    return (this.getAttribute(Attributes.PREFER_CMCD) as ValueOf<CmcdTypes>) ?? undefined;
-  }
-
-  set preferCmcd(value: ValueOf<CmcdTypes> | undefined) {
-    if (value === this.preferCmcd) return;
-    if (!value) {
-      this.removeAttribute(Attributes.PREFER_CMCD);
-    } else if (CmcdTypeValues.includes(value)) {
-      this.setAttribute(Attributes.PREFER_CMCD, value);
-    } else {
-      console.warn(`Invalid value for preferCmcd. Must be one of ${CmcdTypeValues.join()}`);
-    }
-  }
-
-  get playerInitTime() {
-    if (!this.hasAttribute(Attributes.PLAYER_INIT_TIME)) return this.#defaultPlayerInitTime;
-    return +(this.getAttribute(Attributes.PLAYER_INIT_TIME) as string) as number;
-  }
-
-  set playerInitTime(val) {
-    // don't cause an infinite loop and avoid change event dispatching
-    if (val == this.playerInitTime) return;
-
-    if (val == null) {
-      this.removeAttribute(Attributes.PLAYER_INIT_TIME);
-    } else {
-      this.setAttribute(Attributes.PLAYER_INIT_TIME, `${+val}`);
-    }
-  }
-
-  get playerSoftwareName() {
-    return this.#playerSoftwareName ?? playerSoftwareName;
-  }
-
-  set playerSoftwareName(value: string | undefined) {
-    this.#playerSoftwareName = value;
-  }
-
-  get playerSoftwareVersion() {
-    return this.#playerSoftwareVersion ?? playerSoftwareVersion;
-  }
-
-  set playerSoftwareVersion(value: string | undefined) {
-    this.#playerSoftwareVersion = value;
-  }
-
-  // Keeping this named "_hls" since it's exposed for unadvertised "advanced usage" via getter that assumes specifically hls.js (CJP)
-  get _hls(): PlaybackEngine | undefined {
-    return this.#core?.engine;
-  }
-
-  get mux(): Readonly<HTMLVideoElement['mux']> | undefined {
-    return this.nativeEl?.mux;
-  }
-
-  get error() {
-    return getError(this.nativeEl) ?? null;
-  }
-
-  get errorTranslator(): ((errorEvent: any) => any) | undefined {
-    return this.#errorTranslator;
-  }
-
-  set errorTranslator(value: ((errorEvent: any) => any) | undefined) {
-    this.#errorTranslator = value;
-  }
-
-  get src() {
-    // Use the attribute value as the source of truth.
-    // No need to store it in two places.
-    // This avoids needing a to read the attribute initially and update the src.
-    return this.getAttribute('src') as string;
-  }
-
-  set src(val: string) {
-    // If being set by attributeChangedCallback,
-    // dont' cause an infinite loop
-    if (val === this.src) return;
-
-    if (val == null) {
-      this.removeAttribute('src');
-    } else {
-      this.setAttribute('src', val);
-    }
-  }
-
-  get type(): ValueOf<ExtensionMimeTypeMap> | undefined {
-    return (this.getAttribute(Attributes.TYPE) as ValueOf<ExtensionMimeTypeMap>) ?? undefined;
-  }
-
-  set type(val: ValueOf<ExtensionMimeTypeMap> | undefined) {
-    // dont' cause an infinite loop
-    if (val === this.type) return;
-
-    if (val) {
-      this.setAttribute(Attributes.TYPE, val);
-    } else {
-      this.removeAttribute(Attributes.TYPE);
-    }
-  }
+export * from '@mux/mux-video/base';
 
+// castable-video should be mixed in last so that it can override load().
+class MuxVideoElement extends CastableMediaMixin(MediaTracksMixin(MuxVideoBaseElement)) {
+  // Define autoplay in the most outer layer because mux-video accepts string | boolean
+  // which is not compatible the CustomVideoElement.autoplay boolean only type.
   /** @ts-ignore */
   get autoplay(): Autoplay {
     const attr = this.getAttribute('autoplay');
@@ -280,589 +37,6 @@ class MuxVideoBaseElement extends CustomVideoElement implements Partial<MuxMedia
     }
   }
 
-  get preload() {
-    const val = this.getAttribute('preload') as HTMLMediaElement['preload'];
-    if (val === '') return 'auto';
-    if (['none', 'metadata', 'auto'].includes(val)) return val;
-    return super.preload;
-  }
-
-  set preload(val) {
-    // don't cause an infinite loop
-    // check the attribute because an empty string maps to the `auto` prop
-    if (val == this.getAttribute('preload')) return;
-
-    if (['', 'none', 'metadata', 'auto'].includes(val)) {
-      this.setAttribute('preload', val);
-    } else {
-      this.removeAttribute('preload');
-    }
-  }
-
-  get debug() {
-    return this.getAttribute(Attributes.DEBUG) != null;
-  }
-
-  set debug(val) {
-    // dont' cause an infinite loop
-    if (val === this.debug) return;
-
-    if (val) {
-      this.setAttribute(Attributes.DEBUG, '');
-    } else {
-      this.removeAttribute(Attributes.DEBUG);
-    }
-  }
-
-  get disableTracking() {
-    return this.hasAttribute(Attributes.DISABLE_TRACKING);
-  }
-
-  set disableTracking(val) {
-    // dont' cause an infinite loop
-    if (val === this.disableTracking) return;
-
-    this.toggleAttribute(Attributes.DISABLE_TRACKING, !!val);
-  }
-
-  get disableCookies() {
-    return this.hasAttribute(Attributes.DISABLE_COOKIES);
-  }
-
-  set disableCookies(val) {
-    // dont' cause an infinite loop
-    if (val === this.disableCookies) return;
-
-    if (val) {
-      this.setAttribute(Attributes.DISABLE_COOKIES, '');
-    } else {
-      this.removeAttribute(Attributes.DISABLE_COOKIES);
-    }
-  }
-
-  get startTime(): number | undefined {
-    const val = this.getAttribute(Attributes.START_TIME);
-    if (val == null) return undefined;
-    const num = +val;
-    return !Number.isNaN(num) ? num : undefined;
-  }
-
-  set startTime(val: number | undefined) {
-    // dont' cause an infinite loop
-    if (val === this.startTime) return;
-
-    if (val == null) {
-      this.removeAttribute(Attributes.START_TIME);
-    } else {
-      this.setAttribute(Attributes.START_TIME, `${val}`);
-    }
-  }
-
-  // NOTE: playbackId may contain additional query params (e.g. token= for playback token) (CJP)
-  get playbackId(): string | undefined {
-    if (this.hasAttribute(Attributes.PLAYBACK_ID)) {
-      return this.getAttribute(Attributes.PLAYBACK_ID) as string;
-    }
-
-    return toPlaybackIdFromSrc(this.src) ?? undefined;
-  }
-
-  set playbackId(val: string | undefined) {
-    // dont' cause an infinite loop
-    if (val === this.playbackId) return;
-
-    if (val) {
-      this.setAttribute(Attributes.PLAYBACK_ID, val);
-    } else {
-      this.removeAttribute(Attributes.PLAYBACK_ID);
-    }
-  }
-
-  get maxResolution() {
-    return (this.getAttribute(Attributes.MAX_RESOLUTION) as MaxResolutionValue) ?? undefined;
-  }
-
-  set maxResolution(val: MaxResolutionValue | undefined) {
-    if (val === this.maxResolution) return;
-
-    if (val) {
-      this.setAttribute(Attributes.MAX_RESOLUTION, val);
-    } else {
-      this.removeAttribute(Attributes.MAX_RESOLUTION);
-    }
-  }
-
-  get minResolution() {
-    return (this.getAttribute(Attributes.MIN_RESOLUTION) as MinResolutionValue) ?? undefined;
-  }
-
-  set minResolution(val: MinResolutionValue | undefined) {
-    if (val === this.minResolution) return;
-
-    if (val) {
-      this.setAttribute(Attributes.MIN_RESOLUTION, val);
-    } else {
-      this.removeAttribute(Attributes.MIN_RESOLUTION);
-    }
-  }
-
-  get renditionOrder() {
-    return (this.getAttribute(Attributes.RENDITION_ORDER) as RenditionOrderValue) ?? undefined;
-  }
-
-  set renditionOrder(val: RenditionOrderValue | undefined) {
-    if (val === this.renditionOrder) return;
-
-    if (val) {
-      this.setAttribute(Attributes.RENDITION_ORDER, val);
-    } else {
-      this.removeAttribute(Attributes.RENDITION_ORDER);
-    }
-  }
-
-  get programStartTime() {
-    const val = this.getAttribute(Attributes.PROGRAM_START_TIME);
-    if (val == null) return undefined;
-    const num = +val;
-    return !Number.isNaN(num) ? num : undefined;
-  }
-
-  set programStartTime(val: number | undefined) {
-    if (val == undefined) {
-      this.removeAttribute(Attributes.PROGRAM_START_TIME);
-    } else {
-      this.setAttribute(Attributes.PROGRAM_START_TIME, `${val}`);
-    }
-  }
-
-  get programEndTime() {
-    const val = this.getAttribute(Attributes.PROGRAM_END_TIME);
-    if (val == null) return undefined;
-    const num = +val;
-    return !Number.isNaN(num) ? num : undefined;
-  }
-
-  set programEndTime(val: number | undefined) {
-    if (val == undefined) {
-      this.removeAttribute(Attributes.PROGRAM_END_TIME);
-    } else {
-      this.setAttribute(Attributes.PROGRAM_END_TIME, `${val}`);
-    }
-  }
-
-  get assetStartTime() {
-    const val = this.getAttribute(Attributes.ASSET_START_TIME);
-    if (val == null) return undefined;
-    const num = +val;
-    return !Number.isNaN(num) ? num : undefined;
-  }
-
-  set assetStartTime(val: number | undefined) {
-    if (val == undefined) {
-      this.removeAttribute(Attributes.ASSET_START_TIME);
-    } else {
-      this.setAttribute(Attributes.ASSET_START_TIME, `${val}`);
-    }
-  }
-
-  get assetEndTime() {
-    const val = this.getAttribute(Attributes.ASSET_END_TIME);
-    if (val == null) return undefined;
-    const num = +val;
-    return !Number.isNaN(num) ? num : undefined;
-  }
-
-  set assetEndTime(val: number | undefined) {
-    if (val == undefined) {
-      this.removeAttribute(Attributes.ASSET_END_TIME);
-    } else {
-      this.setAttribute(Attributes.ASSET_END_TIME, `${val}`);
-    }
-  }
-
-  get customDomain() {
-    return this.getAttribute(Attributes.CUSTOM_DOMAIN) ?? undefined;
-  }
-
-  set customDomain(val: string | undefined) {
-    // dont' cause an infinite loop
-    if (val === this.customDomain) return;
-
-    if (val) {
-      this.setAttribute(Attributes.CUSTOM_DOMAIN, val);
-    } else {
-      this.removeAttribute(Attributes.CUSTOM_DOMAIN);
-    }
-  }
-
-  get drmToken() {
-    return this.getAttribute(Attributes.DRM_TOKEN) ?? undefined;
-  }
-
-  set drmToken(val: string | undefined) {
-    // dont' cause an infinite loop
-    if (val === this.drmToken) return;
-
-    if (val) {
-      this.setAttribute(Attributes.DRM_TOKEN, val);
-    } else {
-      this.removeAttribute(Attributes.DRM_TOKEN);
-    }
-  }
-
-  /**
-   * Get the playback token for signing the src URL.
-   */
-  get playbackToken() {
-    if (this.hasAttribute(Attributes.PLAYBACK_TOKEN)) {
-      return this.getAttribute(Attributes.PLAYBACK_TOKEN) ?? undefined;
-    }
-    if (this.hasAttribute(Attributes.PLAYBACK_ID)) {
-      const [, queryParts] = toPlaybackIdParts(this.playbackId ?? '');
-      return new URLSearchParams(queryParts).get('token') ?? undefined;
-    }
-    if (this.src) {
-      return new URLSearchParams(this.src).get('token') ?? undefined;
-    }
-    return undefined;
-  }
-
-  /**
-   * Set the playback token for signing the src URL.
-   */
-  set playbackToken(val: string | undefined) {
-    if (val === this.playbackToken) return;
-
-    if (val) {
-      this.setAttribute(Attributes.PLAYBACK_TOKEN, val);
-    } else {
-      this.removeAttribute(Attributes.PLAYBACK_TOKEN);
-    }
-  }
-
-  get tokens() {
-    const playback = this.getAttribute(Attributes.PLAYBACK_TOKEN);
-    const drm = this.getAttribute(Attributes.DRM_TOKEN);
-    return {
-      ...this.#tokens,
-      ...(playback != null ? { playback } : {}),
-      ...(drm != null ? { drm } : {}),
-    };
-  }
-
-  set tokens(val) {
-    this.#tokens = val ?? {};
-  }
-
-  get ended() {
-    // This ensures that edge case media that doesn't properly end will
-    // still announce itself as "ended".
-    return getEnded(this.nativeEl, this._hls);
-  }
-
-  get envKey(): string | undefined {
-    return this.getAttribute(Attributes.ENV_KEY) ?? undefined;
-  }
-
-  set envKey(val: string | undefined) {
-    // dont' cause an infinite loop
-    if (val === this.envKey) return;
-
-    if (val) {
-      this.setAttribute(Attributes.ENV_KEY, val);
-    } else {
-      this.removeAttribute(Attributes.ENV_KEY);
-    }
-  }
-
-  get beaconCollectionDomain(): string | undefined {
-    return this.getAttribute(Attributes.BEACON_COLLECTION_DOMAIN) ?? undefined;
-  }
-
-  set beaconCollectionDomain(val: string | undefined) {
-    // don't cause an infinite loop
-    if (val === this.beaconCollectionDomain) return;
-
-    if (val) {
-      this.setAttribute(Attributes.BEACON_COLLECTION_DOMAIN, val);
-    } else {
-      this.removeAttribute(Attributes.BEACON_COLLECTION_DOMAIN);
-    }
-  }
-
-  get streamType(): ValueOf<StreamTypes> | undefined {
-    // Allow overriding inferred `streamType`
-    return (this.getAttribute(Attributes.STREAM_TYPE) as ValueOf<StreamTypes>) ?? getStreamType(this.nativeEl);
-  }
-
-  set streamType(val: ValueOf<StreamTypes> | undefined) {
-    // don't cause an infinite loop and avoid change event dispatching
-    if (val === this.streamType) return;
-
-    if (val) {
-      this.setAttribute(Attributes.STREAM_TYPE, val);
-    } else {
-      this.removeAttribute(Attributes.STREAM_TYPE);
-    }
-  }
-
-  get targetLiveWindow() {
-    // Allow overriding inferred `targetLiveWindow`
-    if (this.hasAttribute(Attributes.TARGET_LIVE_WINDOW)) {
-      return +(this.getAttribute(Attributes.TARGET_LIVE_WINDOW) as string) as number;
-    }
-    return getTargetLiveWindow(this.nativeEl);
-  }
-
-  set targetLiveWindow(val: number | undefined) {
-    // don't cause an infinite loop and avoid change event dispatching
-    if (val == this.targetLiveWindow) return;
-
-    if (val == null) {
-      this.removeAttribute(Attributes.TARGET_LIVE_WINDOW);
-    } else {
-      this.setAttribute(Attributes.TARGET_LIVE_WINDOW, `${+val}`);
-    }
-  }
-
-  get liveEdgeStart() {
-    if (this.hasAttribute(Attributes.LIVE_EDGE_OFFSET)) {
-      const { liveEdgeOffset } = this;
-      const seekableEnd = this.nativeEl.seekable.end(0) ?? 0;
-      const seekableStart = this.nativeEl.seekable.start(0) ?? 0;
-      return Math.max(seekableStart, seekableEnd - (liveEdgeOffset as number));
-    }
-    return getLiveEdgeStart(this.nativeEl);
-  }
-
-  get liveEdgeOffset() {
-    if (!this.hasAttribute(Attributes.LIVE_EDGE_OFFSET)) return undefined;
-    return +(this.getAttribute(Attributes.LIVE_EDGE_OFFSET) as string) as number;
-  }
-
-  set liveEdgeOffset(val: number | undefined) {
-    // don't cause an infinite loop and avoid change event dispatching
-    if (val == this.liveEdgeOffset) return;
-
-    if (val == null) {
-      this.removeAttribute(Attributes.LIVE_EDGE_OFFSET);
-    } else {
-      this.setAttribute(Attributes.LIVE_EDGE_OFFSET, `${+val}`);
-    }
-  }
-
-  get seekable() {
-    return getSeekable(this.nativeEl);
-  }
-
-  async addCuePoints<T = any>(cuePoints: CuePoint<T>[]) {
-    return addCuePoints(this.nativeEl, cuePoints);
-  }
-
-  get activeCuePoint() {
-    return getActiveCuePoint(this.nativeEl);
-  }
-
-  get cuePoints() {
-    return getCuePoints(this.nativeEl);
-  }
-
-  async addChapters(chapters: Chapter[]) {
-    return addChapters(this.nativeEl, chapters);
-  }
-
-  get activeChapter() {
-    return getActiveChapter(this.nativeEl);
-  }
-
-  get chapters() {
-    return getChapters(this.nativeEl);
-  }
-
-  getStartDate() {
-    return getStartDate(this.nativeEl, this._hls);
-  }
-
-  get currentPdt() {
-    return getCurrentPdt(this.nativeEl, this._hls);
-  }
-
-  get preferPlayback(): ValueOf<PlaybackTypes> | undefined {
-    const val = this.getAttribute(Attributes.PREFER_PLAYBACK);
-    if (val === PlaybackTypes.MSE || val === PlaybackTypes.NATIVE) return val;
-    return undefined;
-  }
-
-  set preferPlayback(val: ValueOf<PlaybackTypes> | undefined) {
-    if (val === this.preferPlayback) return;
-
-    if (val === PlaybackTypes.MSE || val === PlaybackTypes.NATIVE) {
-      this.setAttribute(Attributes.PREFER_PLAYBACK, val);
-    } else {
-      this.removeAttribute(Attributes.PREFER_PLAYBACK);
-    }
-  }
-
-  get metadata() {
-    const inferredMetadataAttrs: { [key: string]: string } = this.getAttributeNames()
-      .filter((attrName) => {
-        return attrName.startsWith('metadata-') && !([Attributes.METADATA_URL] as string[]).includes(attrName);
-      })
-      .reduce(
-        (currAttrs, attrName) => {
-          const value = this.getAttribute(attrName);
-          if (value != null) {
-            currAttrs[attrName.replace(/^metadata-/, '').replace(/-/g, '_') as string] = value;
-          }
-          return currAttrs;
-        },
-        {} as { [key: string]: string }
-      );
-
-    return {
-      ...inferredMetadataAttrs,
-      ...this.#metadata,
-    };
-  }
-
-  set metadata(val: Readonly<Metadata> | undefined) {
-    this.#metadata = val ?? {};
-    if (!!this.mux) {
-      this.mux.emit('hb', this.#metadata);
-    }
-  }
-
-  get _hlsConfig() {
-    return this.#_hlsConfig;
-  }
-
-  set _hlsConfig(val: Readonly<Partial<HlsConfig>> | undefined) {
-    this.#_hlsConfig = val;
-  }
-
-  get logo() {
-    return this.getAttribute(Attributes.LOGO);
-  }
-
-  set logo(val) {
-    if (val) {
-      this.setAttribute(Attributes.LOGO, val);
-    } else {
-      this.removeAttribute(Attributes.LOGO);
-    }
-  }
-
-  async #requestLoad() {
-    if (this.#loadRequested) return;
-    await (this.#loadRequested = Promise.resolve());
-    this.#loadRequested = null;
-    this.load();
-  }
-
-  load() {
-    this.#core = initialize(this as Partial<MuxMediaProps>, this.nativeEl, this.#core);
-  }
-
-  unload() {
-    teardown(this.nativeEl, this.#core);
-    this.#core = undefined;
-  }
-
-  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null) {
-    // Only forward the attributes to the native media element that are not handled.
-    const isNativeAttr = CustomVideoElement.observedAttributes.includes(attrName);
-    if (isNativeAttr && !['src', 'autoplay', 'preload'].includes(attrName)) {
-      super.attributeChangedCallback(attrName, oldValue, newValue);
-    }
-
-    switch (attrName) {
-      case Attributes.PLAYER_SOFTWARE_NAME:
-        this.playerSoftwareName = newValue ?? undefined;
-        break;
-      case Attributes.PLAYER_SOFTWARE_VERSION:
-        this.playerSoftwareVersion = newValue ?? undefined;
-        break;
-      case 'src': {
-        const hadSrc = !!oldValue;
-        const hasSrc = !!newValue;
-        if (!hadSrc && hasSrc) {
-          this.#requestLoad();
-        } else if (hadSrc && !hasSrc) {
-          this.unload();
-        } else if (hadSrc && hasSrc) {
-          this.unload();
-          this.#requestLoad();
-        }
-        break;
-      }
-      case 'autoplay':
-        if (newValue === oldValue) {
-          break;
-        }
-        /** In case newValue is an empty string or null, use this.autoplay which translates to booleans (WL) */
-        this.#core?.setAutoplay(this.autoplay);
-        break;
-      case 'preload':
-        if (newValue === oldValue) {
-          break;
-        }
-        this.#core?.setPreload(newValue as HTMLMediaElement['preload']);
-        break;
-      case Attributes.PLAYBACK_ID:
-        this.src = toMuxVideoURL(this) as string;
-        break;
-      case Attributes.DEBUG: {
-        const debug = this.debug;
-        if (!!this.mux) {
-          /** @TODO Link to docs for a more detailed discussion (CJP) */
-          console.info(
-            'Cannot toggle debug mode of mux data after initialization. Make sure you set all metadata to override before setting the src.'
-          );
-        }
-        if (!!this._hls) {
-          this._hls.config.debug = debug;
-        }
-        break;
-      }
-      case Attributes.METADATA_URL:
-        if (newValue) {
-          fetch(newValue)
-            .then((resp) => resp.json())
-            .then((json) => (this.metadata = json))
-            .catch(() => console.error(`Unable to load or parse metadata JSON from metadata-url ${newValue}!`));
-        }
-        break;
-      case Attributes.STREAM_TYPE:
-        // If the newValue is unset
-        if (newValue == null || newValue !== oldValue) {
-          this.dispatchEvent(new CustomEvent('streamtypechange', { composed: true, bubbles: true }));
-        }
-        break;
-      case Attributes.TARGET_LIVE_WINDOW:
-        if (newValue == null || newValue !== oldValue) {
-          this.dispatchEvent(
-            new CustomEvent('targetlivewindowchange', { composed: true, bubbles: true, detail: this.targetLiveWindow })
-          );
-        }
-        break;
-      default:
-        break;
-    }
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback?.();
-    if (this.nativeEl && this.src && !this.#core) {
-      this.#requestLoad();
-    }
-  }
-  disconnectedCallback(): void {
-    this.unload();
-  }
-}
-
-// castable-video should be mixed in last so that it can override load().
-class MuxVideoElement extends CastableMediaMixin(MediaTracksMixin(MuxVideoBaseElement)) {
   // NOTE: CastableMediaMixin needs to be a subclass of whatever implements the load() method
   // (i.e. MuxVideoBaseElement), but we're overriding castCustomData to provide mux-specific
   // values by default, so it needs to be defined here (i.e. in the composed subclass of
@@ -915,13 +89,4 @@ if (!globalThis.customElements.get('mux-video')) {
   globalThis.MuxVideoElement = MuxVideoElement;
 }
 
-export {
-  PlaybackEngine,
-  PlaybackEngine as Hls,
-  ExtensionMimeTypeMap as MimeTypes,
-  MediaError,
-  VideoEvents,
-  generatePlayerInitTime,
-};
-
 export default MuxVideoElement;
diff --git a/packages/mux-video/src/types.ts b/packages/mux-video/src/types.ts
new file mode 100644
index 000000000..5bd6e6c20
--- /dev/null
+++ b/packages/mux-video/src/types.ts
@@ -0,0 +1,35 @@
+import { Events } from 'custom-media-element';
+import { MuxMediaEventsMap } from '@mux/playback-core';
+
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+
+type EventMapFromEvents<T extends string> = {
+  [K in T]: CustomEvent<{ composed: true; detail: any }>;
+};
+
+type EventsAndMuxMediaEvents = (typeof Events)[number] | keyof MuxMediaEventsMap;
+
+export type EventMap = Expand<EventMapFromEvents<EventsAndMuxMediaEvents>>;
+
+export interface IMuxVideoBaseElement extends HTMLVideoElement {
+  addEventListener<K extends keyof EventMap>(
+    type: K,
+    listener: (this: HTMLMediaElement, ev: EventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  removeEventListener<K extends keyof EventMap>(
+    type: K,
+    listener: (this: HTMLMediaElement, ev: EventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
diff --git a/packages/mux-video/test/index.test.js b/packages/mux-video/test/index.test.js
index caf097143..0646d195a 100644
--- a/packages/mux-video/test/index.test.js
+++ b/packages/mux-video/test/index.test.js
@@ -1,5 +1,5 @@
 import { fixture, assert, aTimeout, oneEvent, waitUntil } from '@open-wc/testing';
-import MuxVideoElement, { VideoEvents } from '../src/index.ts';
+import MuxVideoElement, { Events as MuxVideoEvents } from '../src/index.ts';
 
 describe('<mux-video>', () => {
   it('has a Mux specific API', async function () {
@@ -29,7 +29,7 @@ describe('<mux-video>', () => {
     ></mux-video>`);
 
     const eventMap = {};
-    VideoEvents.forEach((type) => {
+    MuxVideoEvents.forEach((type) => {
       eventMap[type] = false;
       player.addEventListener(type, (e) => {
         assert.equal(e.target, player);
diff --git a/packages/playback-core/src/index.ts b/packages/playback-core/src/index.ts
index 9ba59ce62..b3c635fd4 100644
--- a/packages/playback-core/src/index.ts
+++ b/packages/playback-core/src/index.ts
@@ -508,7 +508,7 @@ export const getEnded = (
 
 export const initialize = (props: Partial<MuxMediaPropsInternal>, mediaEl: HTMLMediaElement, core?: PlaybackCore) => {
   // Automatically tear down previously initialized mux data & hls instance if it exists.
-  teardown(mediaEl, core);
+  teardown(mediaEl, core, props);
   // NOTE: metadata should never be nullish/nil. Adding here for type safety due to current type defs.
   const { metadata = {} } = props;
   const { view_session_id = generateUUID() } = metadata;
@@ -527,7 +527,18 @@ export const initialize = (props: Partial<MuxMediaPropsInternal>, mediaEl: HTMLM
   muxMediaState.set(mediaEl as HTMLMediaElement, { retryCount: 0 });
   const nextHlsInstance = setupHls(props, mediaEl);
   const setPreload = setupPreload(props as Pick<MuxMediaProps, 'preload' | 'src'>, mediaEl, nextHlsInstance);
-  setupMux(props, mediaEl, nextHlsInstance);
+
+  if (props?.muxDataKeepSession && mediaEl?.mux && !mediaEl.mux.deleted) {
+    if (nextHlsInstance) {
+      mediaEl.mux.addHLSJS({
+        hlsjs: nextHlsInstance as HlsInterface,
+        Hls: nextHlsInstance ? Hls : undefined,
+      });
+    }
+  } else {
+    setupMux(props, mediaEl, nextHlsInstance);
+  }
+
   loadMedia(props, mediaEl, nextHlsInstance);
   setupCuePoints(mediaEl);
   setupChapters(mediaEl);
@@ -540,19 +551,32 @@ export const initialize = (props: Partial<MuxMediaPropsInternal>, mediaEl: HTMLM
   };
 };
 
-export const teardown = (mediaEl?: HTMLMediaElement | null, core?: PlaybackCore) => {
+export const teardown = (
+  mediaEl?: HTMLMediaElement | null,
+  core?: PlaybackCore,
+  props?: Partial<MuxMediaPropsInternal>
+) => {
   const hls = core?.engine;
+
+  if (mediaEl?.mux && !mediaEl.mux.deleted) {
+    if (props?.muxDataKeepSession) {
+      if (hls) mediaEl.mux.removeHLSJS();
+    } else {
+      mediaEl.mux.destroy();
+      delete mediaEl.mux;
+    }
+  }
+
   if (hls) {
     hls.detachMedia();
     hls.destroy();
   }
-  if (mediaEl?.mux && !mediaEl.mux.deleted) {
-    mediaEl.mux.destroy();
-    delete mediaEl.mux;
-  }
+
   if (mediaEl) {
-    mediaEl.removeAttribute('src');
-    mediaEl.load();
+    if (mediaEl.hasAttribute('src')) {
+      mediaEl.removeAttribute('src');
+      mediaEl.load();
+    }
     mediaEl.removeEventListener('error', handleNativeError);
     mediaEl.removeEventListener('error', handleInternalError);
     mediaEl.removeEventListener('durationchange', seekInSeekableRange);
@@ -962,12 +986,14 @@ export const setupMux = (
       | 'customDomain'
       | 'disableCookies'
       | 'disableTracking'
+      | 'muxDataSDK'
+      | 'muxDataSDKOptions'
     >
   >,
   mediaEl: HTMLMediaElement,
   hlsjs?: HlsInterface
 ) => {
-  const { envKey: env_key, disableTracking } = props;
+  const { envKey: env_key, disableTracking, muxDataSDK = mux, muxDataSDKOptions = {} } = props;
   const inferredEnv = isMuxVideoSrc(props);
 
   if (!disableTracking && (env_key || inferredEnv)) {
@@ -997,7 +1023,7 @@ export const setupMux = (
       return error;
     };
 
-    mux.monitor(mediaEl, {
+    muxDataSDK.monitor(mediaEl, {
       debug,
       beaconCollectionDomain,
       hlsjs,
@@ -1005,6 +1031,7 @@ export const setupMux = (
       automaticErrorTracking: false,
       errorTranslator: muxEmbedErrorTranslator,
       disableCookies,
+      ...muxDataSDKOptions,
       data: {
         ...(env_key ? { env_key } : {}),
         // Metadata fields
diff --git a/packages/playback-core/src/types.ts b/packages/playback-core/src/types.ts
index a1073de18..b59195839 100644
--- a/packages/playback-core/src/types.ts
+++ b/packages/playback-core/src/types.ts
@@ -1,6 +1,6 @@
 /* eslint @typescript-eslint/triple-slash-reference: "off" */
 /// <reference path="../../../node_modules/mux-embed/dist/types/mux-embed.d.ts" preserve="true" />
-import type { Options } from 'mux-embed';
+import type { Options, Mux } from 'mux-embed';
 import type { MediaError } from './errors';
 import type { HlsConfig } from 'hls.js';
 import type Hls from 'hls.js';
@@ -21,9 +21,11 @@ export type ValueOf<T> = T[keyof T];
 export type Metadata = Partial<Required<Options>['data']>;
 type MetaData = Metadata;
 export type PlaybackEngine = Hls;
+export type MuxDataSDK = Mux;
 
 export type PlaybackCore = {
   engine?: PlaybackEngine;
+  muxDataSDK?: MuxDataSDK;
   setAutoplay: (autoplay?: Autoplay) => void;
   setPreload: (preload?: HTMLMediaElement['preload']) => void;
 };
@@ -201,5 +203,18 @@ export type MuxMediaProps = HTMLMediaElementProps & MuxMediaPropTypes;
 export type MuxMediaPropsInternal = MuxMediaProps & {
   playerSoftwareName: MetaData['player_software_name'];
   playerSoftwareVersion: MetaData['player_software_version'];
+  muxDataSDK?: Mux;
+  muxDataSDKOptions?: Mux;
+  muxDataKeepSession?: boolean;
   drmTypeCb?: (drmType: Metadata['view_drm_type']) => void;
 };
+
+// TODO: Make these more uniform, remove bubbles, discuss to remove detail.
+export type MuxMediaEventsMap = {
+  cuepointchange: CustomEvent<{ composed: true; bubbles: true; detail: CuePoint }>;
+  chapterchange: CustomEvent<{ composed: true; bubbles: true; detail: Chapter }>;
+  targetlivewindowchange: CustomEvent<{ composed: true; bubbles: true }>;
+  streamtypechange: CustomEvent<{ composed: true; bubbles: true }>;
+  seekablechange: CustomEvent<{ composed: true }>;
+  error: CustomEvent<{ detail: MediaError }>;
+};