Ultimate Solution for Video Embedding in Trilium: Permanent Data Storage via Link Anchors

[Userwei0418]

Describe feature

The Problem: Currently, embedding videos (especially local MP4s or iframe-based Bilibili/YouTube videos) in Trilium is prone to data loss. CKEditor often "cleans" or strips custom HTML tags (like

) during mode switches or note refreshes, leaving users with empty spaces where their videos used to be. Furthermore, heavy custom HTML can make the editor feel laggy or cluttered.

The "Link Anchor" Strategy: I have developed a robust method that leverages the core stability of the tag. Since hyperlinking is a fundamental feature of any editor, tags and their href attributes are never stripped.

My tool uses a Dual-Layer Design:

Storage Layer (Data): Videos are stored as simple links with a unique hash suffix:

Local/Direct: http://localhost/video.mp4#video-native

Embedded: https://player.bilibili...#video-iframe

Display Layer (View):

Edit Mode: CSS transforms these links into beautiful "Capsule Buttons," keeping the editor clean and the data safe.

Read-only Mode: A Frontend JS Widget automatically scans the DOM and renders these specific links into full-featured HTML5 players or iframes.

Key Features:

Zero Data Loss: Your video URLs are stored in standard links that CKEditor won't touch.

Multi-Platform: Native support for Localhost, Alist, Bilibili, YouTube, and more.

Rich UI: Includes loading spinners, error handling, and source URL copy buttons.

Automatic Fixer: A built-in converter to upgrade raw URLs or broken old HTML structures to this new safe format.

Github Repository: You can find the full code and installation guide here: 👉 https://github.com/Userwei0418/trilium-fast-player

I hope this helps others who have struggled with disappearing videos in Trilium. Feedback and contributions are welcome!

Additional Information

No response