DOC-3224: uc-video tags can now be made responsive.

Author: kemister85

modules/ROOT/pages/8.3.0-release-notes.adoc

@@ -28,6 +28,20 @@ include::partial$misc/admon-releasenotes-for-stable.adoc[]
 
 The following premium plugin updates were released alongside {productname} {release-version}.
 
+=== Media Optimizer
+
+The {productname} {release-version} release includes an accompanying release of the **Media Optimizer** premium plugin.
+
+**Media Optimizer** includes the following improvements.
+
+==== `uc-video` tags can now be made responsive
+
+The **Media Optimizer** plugin's video functionality has been enhanced with a new configuration option for the xref:uploadcare-video.adoc#uploadcare-video-properties[`uploadcare_video_properties`] setting:
+
+* **`fluid`**: Enables responsive video sizing. When set to `true`, videos are automatically sized responsively using `width: min(original-width, 100%)` CSS, allowing them to scale down on smaller screens while maintaining their maximum size.
+
+For information on the **Media Optimizer** plugin, see: xref:uploadcare-video.adoc[Media Optimizer: Video].
+
 // === <Premium plugin name 1> <Premium plugin name 1 version>
 
 // The {productname} {release-version} release includes an accompanying release of the **<Premium plugin name 1>** premium plugin.

modules/ROOT/pages/uploadcare-video.adoc

@@ -117,21 +117,38 @@ include::partial$configuration/uploadcare_video_resize.adoc[leveloffset=+1]
 
 The plugin creates a custom `+<uc-video>+` element that replaces the standard HTML `+<video>+` element when videos are processed through Uploadcare's infrastructure.
 
-.Example: Custom video element created by the plugin on video insertion
+.Example: Custom video element created by the plugin on video insertion (responsive)
 [source,html]
 ----
 <uc-video 
   uuid="video-uuid-here"
   class="tox-uc-video"
-  contenteditable="false"
-  data-setup="{}"
+  contenteditable="true"
+  fluid="true"
   controls="true"
   autoplay="false"
   loop="false"
   muted="false"
   preload="metadata"
-  width="640"
-  height="360"
+  style="width: min(640px, 100%);"
+  poster="https://example.com/poster.jpg"
+  showlogo="false"
+</uc-video>
+----
+
+.Example: Custom video element with fixed dimensions (non-responsive)
+[source,html]
+----
+<uc-video 
+  uuid="video-uuid-here"
+  class="tox-uc-video"
+  contenteditable="true"
+  controls="true"
+  autoplay="false"
+  loop="false"
+  muted="false"
+  preload="metadata"
+  style="width: 640px; height: 360px;"
   poster="https://example.com/poster.jpg"
   showlogo="false"
 </uc-video>

modules/ROOT/partials/configuration/uploadcare_video_properties.adoc

@@ -15,17 +15,17 @@ Configures the video player properties and behavior for video elements.
 |`autoplay` | Boolean | `true`, `false`, `undefined` | `undefined` | Automatically starts video playback when the page loads. NOTE: Even if autoplay is enabled, modern browsers may delay or block playback until the user interacts with the page, depending on their autoplay policies.
 |`controls` | Boolean | `true`, `false` | `true` | Displays the video player controls (play/pause, volume, timeline, fullscreen, etc.). When disabled, users can still control playback through keyboard shortcuts or programmatic methods.
 |`disablePictureInPicture` | Boolean | `true`, `false`, `undefined` | `undefined` | Disables the Picture-in-Picture feature for the video player. When enabled, users cannot use Picture-in-Picture mode.
-|`height` | Number or String | Pixels or CSS value | `undefined` | Sets the video player height. Accepts numeric values (interpreted as pixels) or CSS values like `"100%"`, `"50vh"`, or `"auto"`.
+|`fluid` | Boolean | `true`, `false`, `undefined` | `undefined` | Enables responsive video sizing. When set to `true`, videos are automatically sized responsively using `width: min(original-width, 100%)` CSS, allowing them to scale down on smaller screens while maintaining their maximum size.
+|`height` | Number or String | Pixels or CSS value | `undefined` | Sets the video player height. Accepts numeric values (interpreted as pixels) or CSS values like `"100%"`, `"50vh"`, or `"auto"`. When a numeric value is provided, it is applied as an inline CSS style with `px` units (e.g., `height: 360px`).
 |`loop` | Boolean | `true`, `false`, `undefined` | `undefined` | Automatically restarts video playback from the beginning when it reaches the end. Useful for background videos or continuous content loops.
 |`muted` | Boolean | `true`, `false`, `undefined` | `undefined` | Mutes the video audio by default. Often used in combination with autoplay since most browsers require muted videos for autoplay to function.
 |`poster` | String | Valid URL | `undefined` | Sets a poster image (thumbnail) that displays before video playback begins. The image should match the video's aspect ratio for best results.
 |`posterOffset` | String | Time format `"MM:SS"` or `"H:MM:SS"` | `undefined` | Sets the time offset for generating a poster image from the video. When `poster` is not specified, this value determines the frame to use as the poster. Format: `"0:10"` for 10 seconds, `"1:30"` for 1 minute 30 seconds.
 |`preload` | String | `auto`, `metadata`, `none` | `undefined` | Controls how much video data to preload: `auto` loads the entire video, `metadata` loads only basic information, `none` loads nothing until playback starts. Performance considerations: use `metadata` for better page load times and bandwidth conservation, `auto` for immediate playback without buffering delays, and `none` for maximum bandwidth savings when videos may not be played.
 |`showLogo` | Boolean | `true`, `false` | `false` | Displays the Uploadcare logo overlay on the video player.
-|`width` | Number or String | Pixels or CSS value | `undefined` | Sets the video player width. Accepts numeric values (interpreted as pixels) or CSS values like `"100%"`, `"50vw"`, or `"auto"`.
+|`width` | Number or String | Pixels or CSS value | `undefined` | Sets the video player width. Accepts numeric values (interpreted as pixels) or CSS values like `"100%"`, `"50vw"`, or `"auto"`. When a numeric value is provided, it is applied as an inline CSS style with `px` units (e.g., `width: 640px`). When used with `fluid: true`, the width is applied responsively using `width: min(original-width, 100%)`.
 |===
 
-
 .Example: Basic video player configuration
 
 [source,js]
@@ -45,6 +45,7 @@ tinymce.init({
     posterOffset: '0:10', // Time offset for poster generation
     width: 640,
     height: 360,
+    fluid: true, // Enables responsive video sizing
     showLogo: false
   },
 });