videojs · sampotts · Jun 24, 2026
diff --git a/packages/html/src/define/audio/minimal-skin.tailwind.ts b/packages/html/src/define/audio/minimal-skin.tailwind.ts
@@ -47,13 +47,13 @@ function getTemplateHTML() {
 
       <media-controls class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroup}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
-                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-              </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
+          <media-controls-group class="${buttonGroup}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
             </media-tooltip>
@@ -79,9 +79,9 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
 
-          <div class="${time.controls}">
+          <media-controls-group class="${time.controls}">
             <media-time-group class="${time.group}">
               <media-time type="current" class="${time.current}"></media-time>
               <media-time-separator class="${time.separator}"></media-time-separator>
@@ -98,9 +98,9 @@ function getTemplateHTML() {
                 <media-slider-value type="pointer" class="${slider.value}"></media-slider-value>
               </media-slider-preview>
             </media-time-slider>
-          </div>
+          </media-controls-group>
 
-          <div class="${buttonGroup}">
+          <media-controls-group class="${buttonGroup}">
             <media-playback-rate-button commandfor="playback-rate-menu" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}">
             </media-playback-rate-button>
             <media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="${cn(popup.popover, menu.root)}">
@@ -130,7 +130,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
     </media-container>

diff --git a/packages/html/src/define/audio/minimal-skin.ts b/packages/html/src/define/audio/minimal-skin.ts
@@ -30,7 +30,7 @@ function getTemplateHTML() {
 
       <media-controls class="media-controls">
         <media-tooltip-group>
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
@@ -62,9 +62,9 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
 
-          <div class="media-time-controls">
+          <media-controls-group class="media-time-controls">
             <media-time-group class="media-time-group">
               <media-time type="current" class="media-time media-time--current"></media-time>
               <media-time-separator class="media-time-separator"></media-time-separator>
@@ -81,9 +81,9 @@ function getTemplateHTML() {
                 <media-slider-value type="pointer" class="media-slider__value media-time"></media-slider-value>
               </media-slider-preview>
             </media-time-slider>
-          </div>
+          </media-controls-group>
 
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-playback-rate-button commandfor="playback-rate-menu" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
             <media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="media-popover media-menu">
               <media-playback-rate-radio-group class="media-menu__group">
@@ -112,7 +112,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
     </media-container>

diff --git a/packages/html/src/define/audio/skin.tailwind.ts b/packages/html/src/define/audio/skin.tailwind.ts
@@ -47,13 +47,13 @@ function getTemplateHTML() {
 
       <media-controls class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroup}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
-                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-              </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
+          <media-controls-group class="${buttonGroup}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
             </media-tooltip>
@@ -79,9 +79,9 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
 
-          <div class="${time.group}">
+          <media-controls-group class="${time.group}">
             <media-time type="current" class="${time.current}"></media-time>
             <media-time-slider class="${slider.root}">
               <media-slider-track class="${slider.track}">
@@ -94,9 +94,9 @@ function getTemplateHTML() {
               </media-slider-preview>
             </media-time-slider>
             <media-time type="duration" class="${time.duration}"></media-time>
-          </div>
+          </media-controls-group>
 
-          <div class="${buttonGroup}">
+          <media-controls-group class="${buttonGroup}">
             <media-playback-rate-button commandfor="playback-rate-menu" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-button>
             <media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="${cn(popup.popover, menu.root)}">
               <media-playback-rate-radio-group class="${menu.group}">
@@ -125,7 +125,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
     </media-container>

diff --git a/packages/html/src/define/audio/skin.ts b/packages/html/src/define/audio/skin.ts
@@ -30,7 +30,7 @@ function getTemplateHTML() {
 
       <media-controls class="media-surface media-controls">
         <media-tooltip-group>
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
@@ -62,9 +62,9 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
 
-          <div class="media-time-controls">
+          <media-controls-group class="media-time-controls">
             <media-time type="current" class="media-time"></media-time>
             <media-time-slider class="media-slider">
               <media-slider-track class="media-slider__track">
@@ -77,9 +77,9 @@ function getTemplateHTML() {
               </media-slider-preview>
             </media-time-slider>
             <media-time type="duration" class="media-time"></media-time>
-          </div>
+          </media-controls-group>
 
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-playback-rate-button commandfor="playback-rate-menu" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
             <media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="media-surface media-popover media-menu">
               <media-playback-rate-radio-group class="media-menu__group">
@@ -108,7 +108,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
 

diff --git a/packages/html/src/define/live-audio/minimal-skin.tailwind.ts b/packages/html/src/define/live-audio/minimal-skin.tailwind.ts
@@ -39,23 +39,23 @@ function getTemplateHTML() {
 
       <media-controls class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroup}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
-                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-              </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
+          <media-controls-group class="${buttonGroup}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
 
-              <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
-          </div>
+            <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
+          </media-controls-group>
 
-          <div class="grow" aria-hidden="true"></div>
+          <media-controls-group class="grow" aria-hidden="true"></media-controls-group>
 
-          <div class="${buttonGroup}">
+          <media-controls-group class="${buttonGroup}">
             <media-mute-button commandfor="live-audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
               ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
               ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
@@ -70,7 +70,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
     </media-container>

diff --git a/packages/html/src/define/live-audio/minimal-skin.ts b/packages/html/src/define/live-audio/minimal-skin.ts
@@ -28,7 +28,7 @@ function getTemplateHTML() {
 
       <media-controls class="media-controls">
         <media-tooltip-group>
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
@@ -40,11 +40,11 @@ function getTemplateHTML() {
             </media-tooltip>
 
             <media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
-          </div>
+          </media-controls-group>
 
-          <div class="media-time-controls" aria-hidden="true"></div>
+          <media-controls-group class="media-time-controls" aria-hidden="true"></media-controls-group>
 
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-mute-button commandfor="live-audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
               ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
               ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
@@ -59,7 +59,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
     </media-container>

diff --git a/packages/html/src/define/live-audio/skin.tailwind.ts b/packages/html/src/define/live-audio/skin.tailwind.ts
@@ -39,23 +39,23 @@ function getTemplateHTML() {
 
       <media-controls class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroup}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
-                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-              </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
+          <media-controls-group class="${buttonGroup}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
             </media-tooltip>
 
-              <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
-          </div>
+            <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
+          </media-controls-group>
 
-          <div class="grow" aria-hidden="true"></div>
+          <media-controls-group class="grow" aria-hidden="true"></media-controls-group>
 
-          <div class="${buttonGroup}">
+          <media-controls-group class="${buttonGroup}">
             <media-mute-button commandfor="live-audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
               ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
               ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
@@ -70,7 +70,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
     </media-container>

diff --git a/packages/html/src/define/live-audio/skin.ts b/packages/html/src/define/live-audio/skin.ts
@@ -28,7 +28,7 @@ function getTemplateHTML() {
 
       <media-controls class="media-surface media-controls">
         <media-tooltip-group>
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
@@ -40,11 +40,11 @@ function getTemplateHTML() {
             </media-tooltip>
 
             <media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
-          </div>
+          </media-controls-group>
 
-          <div class="media-time-controls" aria-hidden="true"></div>
+          <media-controls-group class="media-time-controls" aria-hidden="true"></media-controls-group>
 
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-mute-button commandfor="live-audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
               ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
               ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
@@ -59,7 +59,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>