---
title: "Media Optimizer (Video)"
description: "The Video feature of the Media Optimizer plugin allows you to optimize videos in your content."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/uploadcare-video/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/uploadcare-video/index.md"
version: "latest"
last_updated: "2026-03-09T01:59:33Z"
tokens: 2542
---
# Media Optimizer (Video)

The Media Optimizer’s Video feature plugin allows TinyMCE users to upload, process, and embed both images and videos directly within the editor.

## Overview

The Media Optimizer’s Video feature plugin extends TinyMCE with powerful video handling features that allow users to upload, process, and embed videos directly within the editor. The plugin leverages Uploadcare’s infrastructure to provide video processing, custom video player functionality, and responsive video sizing.

## Key benefits

- Upload and optimize videos directly within the editor
- Custom video player with configurable properties
- Video poster image generation
- Responsive video sizing
- Support for MP4 and WebM formats
- Drag-and-drop video upload
- URL-based video insertion
- Video controls customization
- Accessibility features for videos

## Interactive example

**Example**

```js
tinymce.init({
  selector: "textarea#uploadcare-video",
  plugins: [ "uploadcare", "code", "link", "preview", "lists" ],
  uploadcare_public_key: '<your-public-key>',
  // Video configuration
  uploadcare_video_properties: {
  autoplay: false,
  controls: true,
  loop: false,
  muted: true,
  preload: 'metadata',
  posterOffset: "0:10",
  showLogo: false,
  fluid: true,
},
  a11y_advanced_options: true,
  toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist | link uploadcare uploadcare-video | code preview",
  height: 700,	
  content_style: `
  body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.17em; }
  h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; }
  p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; }
  p { line-height: 1.6; margin: 0; } 
  p + p { margin-top: 1rem; }
  a { color: #2b70e3; }
  blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; }
  figcaption { font-size: 0.875em; }
  uc-video { display: block; margin: 1rem 0; width: 100%; }
  `
});
```

## Basic setup

To add the Media Optimizer’s Video feature plugin to the editor, include `uploadcare` in the `plugins` option in the editor configuration.

Example
```js
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare uploadcare-video',
  uploadcare_public_key: '<your-public-key>', // Required for Uploadcare integration
});
```

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).

> **Note:** The Media Optimizer’s Video feature plugin uses the same plugin code `uploadcare` as the Media Optimizer plugin. Video functionality is automatically enabled when video files are uploaded.
> 
> When bundling TinyMCE with webpack or similar tools, the [uploadcare_resources](../uploadcare/#uploadcare-resources) option is required for video functionality to work properly, as it tells the plugin where to find the additional JavaScript resources needed for video playback.

## Video Operations

Below is an overview of the features provided by the Video Optimizer plugin:

| Feature | Icon | Description |
| --- | --- | --- |
| Upload | ![upload-from-device.svg](../_images/icons/upload-from-device.svg) | Upload videos via drag-and-drop, file selection, or URL input |
| Upload from URL | ![upload-from-link.svg](../_images/icons/upload-from-link.svg) | Upload videos from a URL |

Below are the video player control options that are available to the video element:

| Operation | Description |
| --- | --- |
| Play | Customize video player controls and behavior |
| Mute | Mute the video |
| Unmute | Unmute the video |
| Slider | Shows the progress of the video and allows users to move the slider to seek to a specific time in the video |
| Resize | Changes the size of the video (when enabled) |
| Remaining Time | Shows the remaining time of the video |
| Picture-in-Picture | Enables picture-in-picture mode for the video |
| Settings | Opens the video settings menu |
| Fullscreen | Enables fullscreen mode for the video |
| UC Logo | Shows the Uploadcare logo |

## Options

The following configuration options affect the behavior of the Media Optimizer’s Video feature plugin:

### `uploadcare_video_properties`

Configures the video player properties and behavior for video elements.

**Type:** `Object`

**Default:** See properties table below

#### Properties

| Property | Type | Valid Values | Default | Description |
| --- | --- | --- | --- | --- |
| `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"`. 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"`. |

Example: Basic video player configuration
```js
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_video_properties: {
    autoplay: false,
    controls: true,
    loop: false,
    muted: true,
    preload: 'metadata',
    poster: 'https://placehold.co/600x400', // Optional poster image URL
    posterOffset: '0:10', // Time offset for poster generation
    width: 640,
    height: 360,
    showLogo: false
  },
});
```

#### Additional Resources

For comprehensive information about HTML video element attributes and their behavior, see the [MDN Video Element documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video).

### `uploadcare_video_resize`

Controls whether video elements can be resized directly within the editor.

**Type:** `Boolean`

**Default:** `true`

**Valid values:** `true`, `false`

#### Behavior

| Value | Behavior |
| --- | --- |
| `true` (default) | Allows video resizing by adding `uc-video` to `object_resizing` configuration |
| `false` | Disables video resizing by removing `uc-video` from `object_resizing` configuration |

#### Example

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare uploadcare-video',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_video_resize: false
});
```

## Custom Video Element

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 with fixed dimensions (non-responsive)
```html
<uc-video
  uuid="video-uuid-here"
  class="tox-uc-video"
  contenteditable="false"
  data-setup="{}"
  controls="true"
  autoplay="false"
  loop="false"
  muted="false"
  preload="metadata"
  poster="https://example.com/poster.jpg"
  showlogo="false"
</uc-video>
```

## Toolbar buttons

The Media Optimizer’s Video feature plugin provides the following toolbar buttons:

| Identifier | Description |
| --- | --- |
| `uploadcare` | Inserts an image placeholder element. This placeholder supports image uploads via drag-and-drop, file selection, or by providing a URL. |
| `uploadcare-video` | Inserts a video placeholder element. This placeholder supports video uploads via drag-and-drop, file selection, or by providing a URL. |

These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Media Optimizer’s Video feature plugin provides the following menu items:

| Identifier | Description |
| --- | --- |
| `uploadcare` | Inserts an image placeholder element. This placeholder supports image uploads via drag-and-drop, file selection, or by providing a URL. |

These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).