MisticEase – Video Thumbnails & Draggable Popups

Paste a YouTube, YouTube Shorts, Vimeo, or Dailymotion URL into a post or page and publish. That is all it takes: instead of a heavy embedded player, the page shows a lightweight, clickable thumbnail, and the video opens in a popup. There are no shortcodes and no embed code to write.

• Paste and it is done — MisticEase fetches and saves the thumbnail, builds the HTML, and creates the player and the popup.
• Pages stay fast — The video player is not loaded until a visitor clicks. Only a lightweight thumbnail image is on the page.
• Watch while reading — Visitors can drag the popup and leave it anywhere on the page. The video keeps playing while they read on.
• Control each item — Add a short prefix such as t300/ before a URL to set the width, the corner radius, or a text link for that item only.
• Works for images too — Images linked to their media file open in a popup and can be viewed one after another.

See it in action in the MisticEase live demo. MisticEase is built to give editors back the time they used to spend every time they added a video. MisticEase takes on the tedious work. All the editor does is paste a URL. How to use it: paste and publish

1. Paste a video URL into a post or page.
2. Publish.
3. On the published page, the URL becomes a clickable thumbnail. Clicking it opens the video in a popup.

It works the same in the Block Editor and the Classic Editor. If WordPress shows an embedded video player in the editor, MisticEase still converts it to a thumbnail on the published page. A caption added to the embed block is kept. If you do not want a thumbnail, add n/ before the URL. The video title becomes a text link, and clicking it opens the popup. The appearance follows the defaults you choose in the settings. To change a single item, use Slash Markup, described below. Floating mode: watch the video while reading the page A popup first opens in the center of the screen as a normal popup. Dragging it switches it to floating mode, where it can be moved to any place on the page and left there. It stays afloat while the visitor reads on.

• Read the text while watching a how-to video.
• Compare a video with an image. One video and one image can be open at the same time.
• Pin a popup so that it is not closed by accident or replaced by other media. A pinned popup can still be moved.
• While a popup is floating, scrolling the page and clicking links work as usual (except when two popups are both pinned).

Floating mode is available on desktops and tablets with a window wider than 640 px. At 640 px or narrower, media opens in a normal popup. When floating mode is turned off in the settings, only normal popups are used. Keeping pages fast The video player is not loaded until a visitor clicks. Only a lightweight thumbnail image is on the page.

• When a page is first opened, MisticEase fetches a high-quality thumbnail (1280×720 for YouTube when available) and saves it as an image file in the uploads directory. This is finished when the editor opens the page after publishing, so visitors normally receive the saved thumbnail from the site's own server from the start.
• Thumbnails have an explicit width and height, so the layout does not shift while they load.
• It does not use jQuery.
• With lazy loading on (the default), thumbnails are not loaded until they enter the viewport.
• You can set a cap on the thumbnail cache. When the cap is reached, thumbnails are deleted starting with those displayed least recently. In addition, regardless of the cap, thumbnails that have not been displayed for 90 days or more are deleted every 30 days.

Showing items side by side Paste one URL into each cell of a Table block or each column of a Columns block. That alone lines the thumbnails up evenly. When the space they are given is small, thumbnails and popups fit that width, so there is no need to set sizes. Add n/ only to the cells you want as text links. To line up many media items, the Table block is recommended. Slash Markup: change the display one item at a time When a page holds many media items, the same display is not always right for all of them. For example, if a video URL mentioned in the middle of a sentence also becomes a thumbnail, the layout breaks. For those cases, add a short prefix before the URL to set the display for that item. Just join initials and numbers with slashes, as in t200/p500/. It is not a shortcode that you write out for each item, so it is intuitive and easy to remember. Because the notation is separated only by slashes, it is called Slash Markup. Slash Markup is a notation unique to MisticEase. Think of it as a brush that turns a WordPress page into a free canvas. MisticEase builds the HTML as specified, so the item appears in the visitor's browser as the editor intended. Without a prefix, the item follows the settings.

• t300/ — thumbnail width (100–4096 px)
• p980/ — popup width (200–8192 px)
• r30/ — corner radius (1–9999 px)
• n/ — show the video title as a text link instead of a thumbnail
• /Your text/ — show a text link with text of your choice (place it before any other prefix)
• ttl Caption/ — caption shown at the bottom inside the popup. Type one space after ttl, then the text. It is mainly for images, where it is also used as the alternative text
• np/ — show a same-site image URL as an inline image that does not open in a popup

The numbers are examples. Any value within the range can be used. As long as /Your text/ comes first, the other prefixes can be in any order. Prefixes can be combined. Examples:

• t300/r30/p980/https://youtu.be/XXXXXXXXXXX — a 300 px wide thumbnail with a 30 px corner radius that opens a 980 px wide popup.
• n/https://youtu.be/XXXXXXXXXXX — the video title becomes a text link.
• /Watch the demo/p980/https://youtu.be/XXXXXXXXXXX — a text link reading “Watch the demo” that opens a 980 px wide popup.
• t300/p500/r30/ttl Night view/https://example.com/wp-content/uploads/2026/09/sample.jpg — a same-site image shown 300 px wide with a 30 px corner radius. Clicking it opens a 500 px wide popup with “Night view” shown below the image.

A width you set is a maximum. When the available space is smaller, the item shrinks to fit. When prefixes conflict, the one with priority is used. For example, a text link combined with a corner radius becomes a text link. Writing rules When a URL sits inside a sentence

• When text that is displayed on the page comes directly before or after a URL, put a space on each side. This keeps the surrounding text from being taken into the URL. It is needed whether or not you use Slash Markup.
• When the URL is next to an HTML tag (<, >, and so on), no space is needed. The same applies inside a Table block: no space is needed there.
• When punctuation or text follows a URL with no space, type three slashes, ///. MisticEase treats that point as the end of the URL. The /// is not shown on the published page.
• Without /// or a space, the text that follows is treated as part of the URL, and no thumbnail is made (a video URL becomes a plain link).
• Example: See n/https://youtu.be/XXXXXXXXXXX///, then read on.
• The same rules apply when you paste a same-site image URL.

When you use Slash Markup

• No space, line break, or HTML tag can come between the prefix and the URL.
• When text comes before the prefix, put a space before the prefix.
• A /Your text/ label must start at the beginning of the text or immediately after whitespace.
• The text in /Your text/ and ttl cannot contain /, <, >, or quotation marks (", ').

Images open in a popup (lightbox) too An image linked to its media file opens in a popup when clicked. Just set an Image block to link to its media file, or add a text link to an image file. When a page has several, visitors can view them one after another inside the popup. Supported formats are JPEG, PNG, GIF, and WebP. To show a same-site image URL as a thumbnail or an inline image, add Slash Markup. t300/ plus the image URL makes a 300 px wide thumbnail that opens in a popup when clicked. np/ plus the image URL makes an inline image that does not open in a popup. /Your text/ plus the image URL makes a text link that opens the image. An image URL with no prefix is not converted.

• It works even if the uploads directory has been moved, as long as it is under wp-content.
• Images served from a CDN are supported. Add the CDN hostname in the settings.
• If you already use another gallery plugin, turn off image popups in the settings and the two can coexist.

Settings and Multisite What you can set in the settings panel:

• Thumbnail width (default 640 px; 200 px or more)
• Popup width (default 854 px; 200 px or more)
• Thumbnail cache cap (default 0 = unlimited)
• Lazy loading (thumbnails are not loaded until they enter the viewport; on by default)
• Image popups on or off
• Floating mode on or off (shown as “Floating UX mode” in the settings panel)
• CDN hostnames

On Multisite, the network admin panel can enforce the thumbnail cache cap and the CDN hostname allowlist across all sites. It also lists the cache usage of each site, and one button recalculates the usage for all sites. Detailed guidance is available after installation in the “Readme” tab of the settings panel. Other details

• It can be operated from the keyboard. Enter or Space opens a thumbnail, Esc closes a popup, and the Left and Right arrow keys switch images.
• YouTube videos play through youtube-nocookie.com (privacy-enhanced mode).
• Uninstalling removes the settings and the saved thumbnails.

1.3.5

• Video titles are now cached when they are fetched.

Older changelog entries are in changelog-misticease.txt.