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

  • TinyMCE

  • HTML

  • JS

<textarea id="uploadcare-video">
<h1>Experience Mallorca: Outdoor Paradise</h1>
<p><span style="color: #4e5c73;">Discover the outdoor lifestyle and natural beauty of Mallorca through our exclusive video content. From beachside bonfires to mountain adventures, experience what makes this Mediterranean paradise the perfect destination for outdoor enthusiasts.&nbsp;</span></p>

<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><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>
<p>Our island paradise offers more than just beautiful beaches&mdash;it provides a complete outdoor lifestyle experience:</p>

<ul>
<li><strong>Beachside bonfires</strong> under Mediterranean starlit skies</li>
<li><strong>Hiking trails</strong> through Tramuntana mountain ranges</li>
<li><strong>Water sports</strong> in crystal-clear turquoise waters</li>
<li><strong>Cycling routes</strong> through charming countryside villages</li>
<li><strong>Rock climbing</strong> on dramatic coastal cliffs</li>
<li><strong>Sunset gatherings</strong> with friends and family</li>
</ul>

<h2>Start Your Mallorca Adventure</h2>
<p>Ready to experience the outdoor paradise? <a href="tiny.cloud">Contact us today</a> to discover more about Mallorca's outdoor lifestyle and learn how to capture your own magical moments.</p>

<h3>Video Features You Can Test:</h3>
<ul>
<li><strong>Upload new videos</strong> via the uploadcare button in the toolbar</li>
<li><strong>Drag and drop</strong> video files directly into the editor</li>
<li><strong>Resize videos</strong> by dragging the corner handles</li>
<li><strong>Video controls</strong> - play, pause, volume, fullscreen, and more</li>
<li><strong>Video properties</strong> - configure autoplay, loop, muted, and other settings</li>
<li><strong>Supported formats</strong> - MP4, WebM, and other video formats</li>
</ul>
</textarea>
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
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare uploadcare-video',
  uploadcare_public_key: '<your-public-key>', // Required for Uploadcare integration
});

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 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

folder.svg

Upload videos via drag-and-drop, file selection, or URL input

Upload from URL

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".

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
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.

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

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 created by the plugin on video insertion
<uc-video
  uuid="video-uuid-here"
  class="tox-uc-video"
  contenteditable="false"
  data-setup="{}"
  controls="true"
  autoplay="false"
  loop="false"
  muted="false"
  preload="metadata"
  width="640"
  height="360"
  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 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: