From 000473e96ae88eff1613ca70779ec01414e8655f Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Mon, 12 Oct 2026 14:34:26 +0000 Subject: [PATCH 01/17] Add Video fit example and show Open Video UI usage in change-video-fit guide Co-Authored-By: ceyhun.ozgoc --- theoplayer/examples/ui/09-video-fit.mdx | 59 ++++++++++++ .../v11/examples/video-fit/default-ui.html | 90 +++++++++++++++++++ .../v11/examples/video-fit/demo.html | 88 ++++++++++++++++++ theoplayer/ui/web/change-video-fit.mdx | 21 +++++ 4 files changed, 258 insertions(+) create mode 100644 theoplayer/examples/ui/09-video-fit.mdx create mode 100644 theoplayer/static/theoplayer/v11/examples/video-fit/default-ui.html create mode 100644 theoplayer/static/theoplayer/v11/examples/video-fit/demo.html diff --git a/theoplayer/examples/ui/09-video-fit.mdx b/theoplayer/examples/ui/09-video-fit.mdx new file mode 100644 index 000000000000..8fbd06c7a817 --- /dev/null +++ b/theoplayer/examples/ui/09-video-fit.mdx @@ -0,0 +1,59 @@ +--- +sidebar_custom_props: { icon: '🖼️' } +description: Change how the video fits inside the player with contain, cover or fill. +--- + +# Video fit + +import CodeBlock from '@theme/CodeBlock'; +import demoSource from '!!raw-loader!../../static/theoplayer/v11/examples/video-fit/demo.html'; +import defaultUiSource from '!!raw-loader!../../static/theoplayer/v11/examples/video-fit/default-ui.html'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import Example from '@site/src/components/Example'; + +When the player and the video have different aspect ratios, you can choose how the video fits inside the player. +These examples use a 21:9 player for a 16:9 video. Switch between the values of the CSS +[`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property to see the difference: + +- `contain` (default) shows the whole video, with black bars on the sides. +- `cover` fills the player, cutting off the top and bottom of the video. +- `fill` fills the player by stretching the video. + +## Open Video UI + + + +Set the `--theoplayer-video-object-fit` CSS custom property on the UI. `--theoplayer-aspect-ratio` sets the shape of the player itself. + +```css +theoplayer-default-ui { + --theoplayer-aspect-ratio: 21 / 9; + --theoplayer-video-object-fit: cover; +} +``` + +
+ Code + + {demoSource} + +
+ +## Default UI + + + +In the [Default UI](../../ui/web/default-ui/index.mdx), set `object-fit` on the `