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. </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—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.
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 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 |
Upload videos via drag-and-drop, file selection, or URL input |
|
Upload from URL |
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 |
|
Boolean |
|
|
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. |
|
Boolean |
|
|
Displays the video player controls (play/pause, volume, timeline, fullscreen, etc.). When disabled, users can still control playback through keyboard shortcuts or programmatic methods. |
|
Boolean |
|
|
Disables the Picture-in-Picture feature for the video player. When enabled, users cannot use Picture-in-Picture mode. |
|
Number or String |
Pixels or CSS value |
|
Sets the video player height. Accepts numeric values (interpreted as pixels) or CSS values like |
|
Boolean |
|
|
Automatically restarts video playback from the beginning when it reaches the end. Useful for background videos or continuous content loops. |
|
Boolean |
|
|
Mutes the video audio by default. Often used in combination with autoplay since most browsers require muted videos for autoplay to function. |
|
String |
Valid URL |
|
Sets a poster image (thumbnail) that displays before video playback begins. The image should match the video’s aspect ratio for best results. |
|
String |
Time format |
|
Sets the time offset for generating a poster image from the video. When |
|
String |
|
|
Controls how much video data to preload: |
|
Boolean |
|
|
Displays the Uploadcare logo overlay on the video player. |
|
Number or String |
Pixels or CSS value |
|
Sets the video player width. Accepts numeric values (interpreted as pixels) or CSS values like |
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
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.
<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 |
|---|---|
|
Inserts an image placeholder element. This placeholder supports image uploads via drag-and-drop, file selection, or by providing a URL. |
|
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
toolbarconfiguration option. -
The
quickbars_insert_toolbarconfiguration option.
Menu items
The Media Optimizer’s Video feature plugin provides the following menu items:
| Identifier | Description |
|---|---|
|
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
menuconfiguration option. -
The
contextmenuconfiguration option.