YouTube and Vimeo Embeds

From MediaHub 1.19.51, you can import YouTube and Vimeo videos into the library without downloading or storing the video file. Each import becomes a normal library asset with metadata, collections, labels, usage tracking, and the same picker workflow as uploaded files.

Embed assets use MIME type video/vnd.mediahub.embed. The canonical watch URL lives in the asset's About field. There is no file on disk.

Importing an embed

Go to Setup → Media Hub → Import → By URL and paste:

• A YouTube watch link (youtube.com/watch?v=…, youtu.be/…, Shorts, or live URLs)
• A Vimeo link (vimeo.com/… or player.vimeo.com/video/…)
• A bare 11-character YouTube video ID

MediaHub fetches oEmbed metadata for the title, creates the embed asset, and shows a provider thumbnail in the import result. Re-importing the same URL reuses the existing asset; no duplicates are created.

Embed import is URL-only. The Upload screen is for files on disk, not external video URLs.

Image and file URL import on the same screen is unchanged. See Importing Assets for limits on remote file imports (5 MB cap, SSRF protection, HTTP/HTTPS only).

What editors see

Library and picker

• Provider thumbnail from YouTube or Vimeo (CDN-linked, not stored on your server)
• YouTube or Vimeo type badge in grid and list views
• Included when the Video type filter is active
• Optional custom cover from a library image or crop (set on the asset detail page)

Asset detail page

The main preview area shows the embedded player behind a click-to-play consent overlay. YouTube uses youtube-nocookie.com. Cookies load only after the editor clicks play.

The sidebar hides filename and rename controls (there is no file on disk) and shows a read-only Video URL instead.

MediaHub fields

Embed assets can be picked into InputfieldMediaHub like any other asset. In proportional view they render as wide 16:9 posters. The field drawer shows the read-only video URL and hides rename controls.

Rich text (TinyMCE)

Pick an embed from the library toolbar button to open the dedicated video insert/edit dialog. It covers alignment, max width, iframe title, start-at playback, show controls, autoplay muted, loop, and advanced player URL overrides. You can preview and play the embed inline in TinyMCE before saving the page.

Double-click an embedded video to reopen the dialog. Editor-only edit and remove controls appear on the embed in the admin (side tab with pencil icon). Markup survives page save with HTMLPurifier enabled. Layout styles are stored inline on the HTML; no separate front-end stylesheet is injected on public pages.

Uploaded video files (MP4, etc.) still insert as plain <video controls> tags. They do not open this dialog on double-click. For library images, see the separate MediaHub Image Editor.

See Rich Text Integration for toolbar setup and PageFrontEdit notes.

Custom poster images

Provider thumbnails are always available. To use your own art instead, open the asset detail page and choose a library image or crop as the preview image. That cover appears in the library, picker, inputfield cards, and the detail play overlay.

Preview cover settings for uploaded PDFs and audio are separate. See Preview Covers and Asset Detail Page.

Template output

When an embed is inserted through TinyMCE or a MediaHub field on a page, the stored HTML uses a responsive wrapper with inline layout styles. No separate front-end stylesheet is required for field and rich-text embeds inserted through the admin.

For structured output from PHP templates, detect embed assets by MIME type and build the iframe yourself:

$asset = $page->featured_video;
if ($asset && $asset->id && $asset->mimeType() === 'video/vnd.mediahub.embed') {
$pmh = $modules->get('ProcessMediaHub');
$src = $pmh ? $pmh->embedPlayerUrl($asset) : null;
if ($src) {
echo '<div class="video-embed" style="position:relative;aspect-ratio:16/9;">';
echo '<iframe src="' . htmlspecialchars($src) . '" title="' . htmlspecialchars($asset->title) . '"';
echo ' style="width:100%;height:100%;border:0;" allowfullscreen loading="lazy"></iframe>';
echo '</div>';
}
}

isVideo() returns true for embed assets because the MIME type starts with video/. Use an explicit MIME check when you need to distinguish uploaded MP4 files from external embeds.

Helper methods on ProcessMediaHub (available from 1.19.51):

See Template API for preview thumbnails and the full asset method list.

See also

• Importing Assets
• Rich Text Integration
• Asset Detail Page
• Changelog (1.19.51)