diff --git a/client/ui/chat/ChatFragment.tsx b/client/ui/chat/ChatFragment.tsx
index 52d2b55..67f8b5a 100644
--- a/client/ui/chat/ChatFragment.tsx
+++ b/client/ui/chat/ChatFragment.tsx
@@ -33,7 +33,6 @@ const markedInstance = new marked.Marked({
         },
         image({ text, href }) {
             const type = /^(Video|File)=.*/.exec(text)?.[1] || 'Image'
-
             if (/uploaded_files\/[A-Za-z0-9]+$/.test(href)) {
                 return ({
                     Image: `<chat-image src="${href}" alt="${text}"></chat-image>`,
@@ -272,6 +271,8 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                                     const rendeText = DOMPurify.sanitize(markedInstance.parse(msg.text) as string, {
                                         ALLOWED_TAGS: [
                                             "chat-image",
+                                            "chat-video",
+                                            "chat-file",
                                             "span",
                                             "chat-link",
                                         ],
diff --git a/client/ui/custom-elements/chat-video.ts b/client/ui/custom-elements/chat-video.ts
new file mode 100644
index 0000000..073c18d
--- /dev/null
+++ b/client/ui/custom-elements/chat-video.ts
@@ -0,0 +1,17 @@
+import { $ } from 'mdui/jq'
+
+customElements.define('chat-video', class extends HTMLElement {
+    constructor() {
+        super()
+    }
+    connectedCallback() {
+        this.style.display = 'block'
+        const e = new DOMParser().parseFromString(`<video controls>視頻無法播放</video>`, 'text/html').body.firstChild as Node
+        e.style.width = "100%"
+        e.style.height = "100%"
+        e.style.borderRadius = "var(--mdui-shape-corner-medium)"
+        e.alt = $(this).attr('alt') || ""
+        e.src = $(this).attr('src') as string
+        this.appendChild(e)
+    }
+})