DOC-3224: uc-video tags can now be made responsive. (#3942)

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

* DOC-3224: Revert changes, minor copy edits and improvements.

* DOC-3224: Minor edits to fix demos.

Author: kemister85

modules/ROOT/examples/live-demos/uploadcare-video/index.html

@@ -4,7 +4,7 @@ <h1>Experience Mallorca: Outdoor Paradise</h1>
 
 <h2>Evenings by the Fire</h2>
 <p>Watch this captivating video showcasing the magical atmosphere of Mallorca's outdoor lifestyle:</p>
-<p><uc-video uuid="83fd9f98-1939-4d99-b5e3-85563f89f5fb" class="tox-uc-video" contenteditable="false" controls="true" /></p>
+<p><uc-video uuid="83fd9f98-1939-4d99-b5e3-85563f89f5fb" fluid="true" style="width: min(3840px, 100%);" class="tox-uc-video" contenteditable="false" controls="true" /></p>
 <p><em>Experience the warmth of beachside gatherings, the crackling of bonfires under starlit skies, and the peaceful ambiance that makes Mallorca the perfect destination for outdoor living.</em></p>
 
 <h2>Mallorca's Outdoor Lifestyle</h2>

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

@@ -28,6 +28,18 @@ 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.
+
+==== Newly uploaded videos are now responsive
+
+Newly uploaded videos are now responsive by default. Videos automatically scale down on smaller screens while maintaining their maximum size. For more information, see: xref:uploadcare-video.adoc#uploadcare-video-properties[`uploadcare_video_properties` configuration option].
+
+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,7 +117,7 @@ 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 with fixed dimensions (non-responsive)
 [source,html]
 ----
 <uc-video 
@@ -130,8 +130,6 @@ The plugin creates a custom `+<uc-video>+` element that replaces the standard HT
   loop="false"
   muted="false"
   preload="metadata"
-  width="640"
-  height="360"
   poster="https://example.com/poster.jpg"
   showlogo="false"
 </uc-video>

modules/ROOT/partials/configuration/uploadcare_video_properties.adoc

@@ -15,7 +15,7 @@ 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"`.
+|`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.
@@ -25,7 +25,6 @@ Configures the video player properties and behavior for video elements.
 |`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"`.
 |===
 
-
 .Example: Basic video player configuration
 
 [source,js]