diff --git a/src/app/globals.css b/src/app/globals.css
index dc98707..9a573ca 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -102,6 +102,7 @@ button:disabled { opacity: .5; cursor: not-allowed; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.minnect-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--line); }
.minnect-question { margin: 0; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.minnect-video { background: #000; border-radius: 0; }
.minnect-audio { width: 100%; height: 36px; }
@media (max-width: 959px) {
.col-left { flex: 1 1 100%; position: static; padding-top: 8px; }
diff --git a/src/components/MinnectMedia.tsx b/src/components/MinnectMedia.tsx
new file mode 100644
index 0000000..c315e25
--- /dev/null
+++ b/src/components/MinnectMedia.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import type { DiscoverMedia } from "@/lib/discover";
+
+interface Props {
+ media: DiscoverMedia | null;
+ thumbnailUrl: string | null;
+ question: string | null;
+ who: string;
+}
+
+/** Video answers play inline; audio keeps the audio control; no url shows the thumbnail only. */
+export function MinnectMedia({ media, thumbnailUrl, question, who }: Props) {
+ const [videoFailed, setVideoFailed] = useState(false);
+
+ const thumb = thumbnailUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : null;
+
+ if (media?.kind === "video" && !videoFailed) {
+ return (
+