From 8f11ef417b52ceec566d5a3c0db2f3af6a24c2c4 Mon Sep 17 00:00:00 2001
From: Nick Sandstrom <32273437+nick4810@users.noreply.github.com>
Date: Tue, 24 Feb 2026 00:59:59 -0800
Subject: [PATCH] Extracted YouTubeTrailerModal component

---
 .../components/modals/YouTubeTrailerModal.jsx | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 frontend/src/components/modals/YouTubeTrailerModal.jsx

diff --git a/frontend/src/components/modals/YouTubeTrailerModal.jsx b/frontend/src/components/modals/YouTubeTrailerModal.jsx
new file mode 100644
index 00000000..d873fea0
--- /dev/null
+++ b/frontend/src/components/modals/YouTubeTrailerModal.jsx
@@ -0,0 +1,29 @@
+import { Box, Modal } from '@mantine/core';
+import React from 'react';
+
+export const YouTubeTrailerModal = ({ opened, onClose, trailerUrl }) => {
+  return (
+    <Modal opened={opened} onClose={onClose} title="Trailer" size="xl" centered>
+      <Box pos="relative" pb={'56.25%'} h={0}>
+        {trailerUrl && (
+          <iframe
+            src={trailerUrl}
+            title="YouTube Trailer"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            referrerPolicy="strict-origin-when-cross-origin"
+            allowFullScreen
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              borderRadius: 8,
+            }}
+          />
+        )}
+      </Box>
+    </Modal>
+  );
+};
\ No newline at end of file