diff --git a/src/back/jdd-components/video/video.jdd.tsx b/src/back/jdd-components/video/video.jdd.tsx
index 7e97b3e..b9f5ce0 100644
--- a/src/back/jdd-components/video/video.jdd.tsx
+++ b/src/back/jdd-components/video/video.jdd.tsx
@@ -2,11 +2,13 @@ import { TempstreamJSX } from "tempstream";
 import type { ComponentToHTMLArgs } from "@sealcode/jdd";
 import { Component, ComponentArguments } from "@sealcode/jdd";
 import { PathFilePointer } from "@sealcode/file-manager";
+import { imageRouter } from "src/back/image-router.js";
 
 const component_arguments = {
 	file: new ComponentArguments.File(),
 	max_height: new ComponentArguments.Number(),
 	max_width: new ComponentArguments.Number(),
+	cover_image: new ComponentArguments.Image().setExampleValues([null]),
 } as const;
 
 export class Video extends Component<typeof component_arguments> {
@@ -15,14 +17,25 @@ export class Video extends Component<typeof component_arguments> {
 	}
 
 	async toHTML({
-		args: { file, max_width, max_height },
+		args: { file, max_width, max_height, cover_image },
 		classes,
 	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
+		const poster = cover_image
+			? await imageRouter.singleImage(
+					await cover_image.getPath(),
+					max_width || 320,
+					"jpg",
+					false
+				)
+			: false;
+
 		return (
 			<div class={["video", ...classes]}>
 				{file instanceof PathFilePointer ? (
 					<video
 						controls
+						loading="lazy"
+						poster={poster}
 						style={[
 							`${max_width ? `max-width: min(${max_width}px, 100cqw);` : ""}`,
 							`${max_height ? `max-height: min(${max_height}px, 80cqh);` : ""}`,