feat: enhance video rendering in markdown by adding controls and a caption

ivictbor · ivictbor · commit 7513a6ca0b6c · 2026-02-13T11:30:57.000Z
diff --git a/custom/MarkdownEditor.vue b/custom/MarkdownEditor.vue
@@ -425,7 +425,7 @@ function markdownForUploadedFile(file: File, url: string): string {
 
   if (file.type?.startsWith('video/')) {
     const mediaType = file.type || 'video/mp4';
-    return `<video width="400">\n<!-- For gif-like videos use: <video width="400" autoplay loop muted playsinline> -->\n  <source src="${url}" type="${mediaType}">\n</video>`;
+    return `<figure>\n  <!-- For gif-like videos use: <video width="500" autoplay loop muted playsinline> -->\n  <video width="500" controls>\n    <source src="${url}" type="${mediaType}">\n  </video>\n  <figcaption>Demo</figcaption>\n</figure>`;
   }
 
   // alert that file cant be uploaded

Original file line number	Diff line number	Diff line change
`@@ -425,7 +425,7 @@ function markdownForUploadedFile(file: File, url: string): string {`
`425`	`425`
`426`	`426`	`if (file.type?.startsWith('video/')) {`
`427`	`427`	`const mediaType = file.type \|\| 'video/mp4';`
`428`		- return `<video width="400">\n<!-- For gif-like videos use: <video width="400" autoplay loop muted playsinline> -->\n <source src="${url}" type="${mediaType}">\n</video>`;
	`428`	+ return `<figure>\n <!-- For gif-like videos use: <video width="500" autoplay loop muted playsinline> -->\n <video width="500" controls>\n <source src="${url}" type="${mediaType}">\n </video>\n <figcaption>Demo</figcaption>\n</figure>`;
`429`	`429`	`}`
`430`	`430`
`431`	`431`	`// alert that file cant be uploaded`