fix(VVideo): prefer max-width, default to 100%

J-Sek · J-Sek · commit 22d5dd5e5814 · 2025-08-04T01:59:36.000+02:00
diff --git a/packages/docs/src/examples/v-video/misc-mini.vue b/packages/docs/src/examples/v-video/misc-mini.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="d-flex align-center justify-center ga-6">
+  <div class="d-flex align-center justify-center ga-6 flex-wrap">
     <v-defaults-provider :defaults="{ VVideoControls: { VIconBtn: { color: 'red', border: 'sm' } } }">
       <v-video
+        aspect-ratio="1"
         color="blue"
         controls-variant="mini"
-        height="300"
         image="https://jsek.work/vt-sunflowers.jpg"
         rounded="lg"
         src="https://jsek.work/vt-sunflowers.mp4"
@@ -26,8 +26,8 @@
     </v-defaults-provider>
 
     <v-video
+      aspect-ratio="1"
       controls-variant="mini"
-      height="300"
       image="https://jsek.work/vt-sunflowers.jpg"
       rounded="xl"
       src="https://jsek.work/vt-sunflowers.mp4"
diff --git a/packages/docs/src/examples/v-video/misc-tube.vue b/packages/docs/src/examples/v-video/misc-tube.vue
@@ -6,6 +6,7 @@
     controls-variant="tube"
     density="comfortable"
     image="https://jsek.work/vt-video-poster.jpg"
+    max-width="450"
     rounded="lg"
     src="https://jsek.work/vt-video.mp4"
     track-color="red"
diff --git a/packages/docs/src/examples/v-video/prop-color.vue b/packages/docs/src/examples/v-video/prop-color.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-sheet class="px-6 py-2 border-b mb-3" color="surface">
-      <div class="d-flex ga-12 flex-wrap align-center justify-center">
+      <div class="d-flex ga-2 ga-md-12 flex-wrap align-center justify-center">
         <div class="d-flex align-center ga-3">
           <v-chip-group v-model="controlsVariant" mandatory>
             <v-chip text="default" value="default" filter label></v-chip>
@@ -52,6 +52,7 @@
       :track-color="colors.track"
       class="mx-auto mb-3"
       image="https://jsek.work/vt-sunflowers.jpg"
+      max-width="450"
       src="https://jsek.work/vt-sunflowers.mp4"
       eager
       muted
diff --git a/packages/docs/src/examples/v-video/prop-density.vue b/packages/docs/src/examples/v-video/prop-density.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-start justify-center ga-6">
+  <div class="d-flex flex-wrap align-start justify-center ga-6">
     <div v-for="density in options" :key="density">
       <v-video
         :density="density"
diff --git a/packages/docs/src/examples/v-video/prop-image.vue b/packages/docs/src/examples/v-video/prop-image.vue
@@ -4,6 +4,7 @@
       :key="resetToPoster"
       :image="posterUrl"
       class="mx-auto mb-3"
+      max-width="450"
       src="https://jsek.work/vt-sunflowers.mp4"
       muted
       @loaded="loaded = true"
diff --git a/packages/docs/src/examples/v-video/prop-rounded.vue b/packages/docs/src/examples/v-video/prop-rounded.vue
@@ -7,6 +7,7 @@
       class="mx-auto"
       height="260"
       image="https://jsek.work/vt-sunflowers.jpg"
+      max-width="450"
       src="https://jsek.work/vt-sunflowers.mp4"
       eager
       floating
diff --git a/packages/docs/src/examples/v-video/prop-start-at.vue b/packages/docs/src/examples/v-video/prop-start-at.vue
@@ -4,6 +4,7 @@
       :start-at="10"
       class="align-self-center"
       image="https://jsek.work/vt-sunflowers.jpg"
+      max-width="450"
       src="https://jsek.work/vt-sunflowers.mp4"
       eager
       muted
diff --git a/packages/docs/src/examples/v-video/slot-append-and-prepend.vue b/packages/docs/src/examples/v-video/slot-append-and-prepend.vue
@@ -4,6 +4,7 @@
       :start-at="10"
       class="align-self-center"
       image="https://jsek.work/vt-sunflowers.jpg"
+      max-width="450"
       src="https://jsek.work/vt-sunflowers.mp4"
       eager
       muted
diff --git a/packages/docs/src/examples/v-video/slot-controls.vue b/packages/docs/src/examples/v-video/slot-controls.vue
@@ -7,9 +7,9 @@
       controls-variant="mini"
       height="300"
       image="https://jsek.work/vt-sunflowers.jpg"
+      max-width="500"
       rounded="lg"
       src="https://jsek.work/vt-sunflowers.mp4"
-      width="500"
       eager
       hide-overlay
       pills
diff --git a/packages/docs/src/examples/v-video/slot-header.vue b/packages/docs/src/examples/v-video/slot-header.vue
@@ -3,6 +3,7 @@
     <v-video
       class="align-self-center"
       image="https://jsek.work/vt-sunflowers.jpg"
+      max-width="450"
       src="https://jsek.work/vt-sunflowers.mp4"
       eager
       muted
diff --git a/packages/vuetify/src/labs/VVideo/VVideo.sass b/packages/vuetify/src/labs/VVideo/VVideo.sass
@@ -138,14 +138,12 @@
 
       > .v-video__content
         width: 100%
-        height: $video-player-height
         aspect-ratio: var(--v-video-aspect-ratio)
 
     &--variant-background
       outline: none
       position: absolute
       pointer-events: none
-      width: 100%
       height: 100%
 
       > .v-video__content
diff --git a/packages/vuetify/src/labs/VVideo/VVideo.tsx b/packages/vuetify/src/labs/VVideo/VVideo.tsx
@@ -394,7 +394,7 @@ export const VVideo = genericComponent<VVideoSlots>()({
           ]}
           style={[
             { '--v-video-aspect-ratio': props.aspectRatio },
-            props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'min-width', 'max-width']),
+            props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'minWidth', 'maxWidth']),
             props.style,
           ]}
           onKeydown={ onKeydown }
diff --git a/packages/vuetify/src/labs/VVideo/_variables.scss b/packages/vuetify/src/labs/VVideo/_variables.scss
@@ -2,8 +2,7 @@
 @use '../../styles/settings';
 
 // Defaults
-$video-player-width: 480px !default;
-$video-player-height: 270px !default;
+$video-player-width: 100% !default;
 $video-aspect-ratio: math.div(16, 9) !default;
 
 $video-elevation: 4 !default;
