diff --git a/packages/html/src/define/live-video/skin.tailwind.ts b/packages/html/src/define/live-video/skin.tailwind.ts
index df86263c..4c1a6769 100644
--- a/packages/html/src/define/live-video/skin.tailwind.ts
+++ b/packages/html/src/define/live-video/skin.tailwind.ts
@@ -42,9 +42,7 @@ function getTemplateHTML() {
       </media-poster>
 
       <media-buffering-indicator class="${bufferingIndicator.root}">
-        <div class="${bufferingIndicator.container}">
-          ${renderIcon('spinner')}
-        </div>
+        ${renderIcon('spinner')}
       </media-buffering-indicator>
 
       <media-error-dialog class="${error.root}">
diff --git a/packages/html/src/define/video/skin.tailwind.ts b/packages/html/src/define/video/skin.tailwind.ts
index 362d3a32..8fd36e77 100644
--- a/packages/html/src/define/video/skin.tailwind.ts
+++ b/packages/html/src/define/video/skin.tailwind.ts
@@ -49,9 +49,7 @@ function getTemplateHTML() {
       </media-poster>
 
       <media-buffering-indicator class="${bufferingIndicator.root}">
-        <div class="${bufferingIndicator.container}">
-          ${renderIcon('spinner')}
-        </div>
+        ${renderIcon('spinner')}
       </media-buffering-indicator>
 
       <media-error-dialog class="${error.root}">
diff --git a/packages/react/src/presets/live-video/skin.tailwind.tsx b/packages/react/src/presets/live-video/skin.tailwind.tsx
index 1eee1f67..4499772a 100644
--- a/packages/react/src/presets/live-video/skin.tailwind.tsx
+++ b/packages/react/src/presets/live-video/skin.tailwind.tsx
@@ -217,15 +217,9 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
         />
       )}
 
-      <BufferingIndicator
-        render={(props) => (
-          <div {...props} className={bufferingIndicator.root}>
-            <div className={bufferingIndicator.container}>
-              <SpinnerIcon className={icon} />
-            </div>
-          </div>
-        )}
-      />
+      <BufferingIndicator className={bufferingIndicator.root}>
+        <SpinnerIcon className={icon} />
+      </BufferingIndicator>
 
       <ErrorDialog.Root>
         <ErrorDialog.Popup className={error.root}>
diff --git a/packages/react/src/presets/tests/skins-compiler-config.test.ts b/packages/react/src/presets/tests/skins-compiler-config.test.ts
index 4c6c3592..934fafe3 100644
--- a/packages/react/src/presets/tests/skins-compiler-config.test.ts
+++ b/packages/react/src/presets/tests/skins-compiler-config.test.ts
@@ -53,6 +53,7 @@ describe('skins compiler config', () => {
     expect(compactCode).toContain(compact('<BufferingIndicator className={bufferingIndicator.root}>'));
     expect(compactCode).toContain(compact('<SpinnerIcon className={icon} />'));
     expect(compactCode).not.toContain('BufferingIndicatorRoot');
+    expect(compactCode).not.toContain('bufferingIndicator.container');
     expect(compactCode).toContain(compact('<ErrorDialog.Popup className={error.popup}>'));
     expect(compactCode).toContain(
       compact('<ErrorDialog.Title className={error.title}>Something went wrong.</ErrorDialog.Title>')
diff --git a/packages/react/src/presets/video/skin.tailwind.tsx b/packages/react/src/presets/video/skin.tailwind.tsx
index 3a330529..ee71dbf4 100644
--- a/packages/react/src/presets/video/skin.tailwind.tsx
+++ b/packages/react/src/presets/video/skin.tailwind.tsx
@@ -366,15 +366,9 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
         />
       )}
 
-      <BufferingIndicator
-        render={(props) => (
-          <div {...props} className={bufferingIndicator.root}>
-            <div className={bufferingIndicator.container}>
-              <SpinnerIcon className={icon} />
-            </div>
-          </div>
-        )}
-      />
+      <BufferingIndicator className={bufferingIndicator.root}>
+        <SpinnerIcon className={icon} />
+      </BufferingIndicator>
 
       <ErrorDialog.Root>
         <ErrorDialog.Popup className={error.root}>
diff --git a/packages/skins/src/default/tailwind/audio.tailwind.ts b/packages/skins/src/default/tailwind/audio.tailwind.ts
index 1de61de5..6193823d 100644
--- a/packages/skins/src/default/tailwind/audio.tailwind.ts
+++ b/packages/skins/src/default/tailwind/audio.tailwind.ts
@@ -75,7 +75,7 @@ export const popup = {
 
 export const bufferingIndicator = {
   ...baseBufferingIndicator,
-  container: cn(baseBufferingIndicator.container, surface),
+  root: cn(baseBufferingIndicator.root, surface),
 };
 
 /* ===========================================================================
diff --git a/packages/skins/src/default/tailwind/components/buffering.ts b/packages/skins/src/default/tailwind/components/buffering.ts
index 8456873a..53a9b151 100644
--- a/packages/skins/src/default/tailwind/components/buffering.ts
+++ b/packages/skins/src/default/tailwind/components/buffering.ts
@@ -1,4 +1,3 @@
 export const bufferingIndicator = {
-  root: 'absolute inset-0 hidden items-center justify-center pointer-events-none text-white not-data-visible:[--media-spinner-animation:none] data-visible:flex',
-  container: 'p-1 rounded-full',
+  root: 'absolute inset-0 m-auto hidden size-fit items-center justify-center pointer-events-none rounded-full p-1 text-white not-data-visible:[--media-spinner-animation:none] data-visible:flex',
 };
diff --git a/packages/skins/src/default/tailwind/video.tailwind.ts b/packages/skins/src/default/tailwind/video.tailwind.ts
index 3287aaed..25617115 100644
--- a/packages/skins/src/default/tailwind/video.tailwind.ts
+++ b/packages/skins/src/default/tailwind/video.tailwind.ts
@@ -178,7 +178,7 @@ export const menu = {
 
 export const bufferingIndicator = {
   ...baseBufferingIndicator,
-  container: cn(baseBufferingIndicator.container, surface),
+  root: cn(baseBufferingIndicator.root, surface),
 };
 
 /* ===========================================================================
diff --git a/packages/skins/src/minimal/tailwind/components/buffering.ts b/packages/skins/src/minimal/tailwind/components/buffering.ts
index c3852bb8..f478308c 100644
--- a/packages/skins/src/minimal/tailwind/components/buffering.ts
+++ b/packages/skins/src/minimal/tailwind/components/buffering.ts
@@ -1,2 +1,2 @@
 export const bufferingIndicator =
-  'absolute inset-0 hidden items-center justify-center pointer-events-none text-white not-data-visible:[--media-spinner-animation:none] data-visible:flex';
+  'absolute inset-0 m-auto hidden size-fit items-center justify-center pointer-events-none rounded-full p-1 text-white not-data-visible:[--media-spinner-animation:none] data-visible:flex';