From 16bb554f0105d55e11c1ff8a9f41f24a7dc13cbc Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Fri, 14 Nov 2025 14:52:48 -0500
Subject: [PATCH 1/3] support video

---
 src/components/Resource/README.md             |  2 +-
 src/components/Resource/ResourceCard.astro    | 21 ++++++++--------
 .../Resource/ResourceCard.module.css          | 25 +++++++++++++++++++
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/components/Resource/README.md b/src/components/Resource/README.md
index e2f6f4d8b44..097d6befad1 100644
--- a/src/components/Resource/README.md
+++ b/src/components/Resource/README.md
@@ -103,4 +103,4 @@ Both approaches work! Use imported images for better optimization, or use path s
 ## Resource types
 
 - **article**: Displays "Read the full article" footer with an arrow icon
-- **video**: No special footer (just the card with title and description)
+- **video**: No special footer (just the card with title and description). For video resources, the `image` prop can be a YouTube video thumbnail URL, and the `link` prop can be the YouTube video URL
diff --git a/src/components/Resource/ResourceCard.astro b/src/components/Resource/ResourceCard.astro
index e3ef42de9d4..aaefec53866 100644
--- a/src/components/Resource/ResourceCard.astro
+++ b/src/components/Resource/ResourceCard.astro
@@ -1,27 +1,28 @@
 ---
-import { Typography, SvgArrowRight2 } from "@chainlink/blocks"
+import { Typography, SvgArrowRight2, SvgButtonPlay } from "@chainlink/blocks"
 import type { ImageMetadata } from "astro"
 import styles from "./ResourceCard.module.css"
+import { ResourceItem } from "./ResourceGrid.astro"
 
-interface Props {
-  image?: string | ImageMetadata
-  imageAlt?: string
-  label: string
-  link: string
-  description: string
-  type: "article" | "video"
-}
+type Props = ResourceItem
 
 const { image, imageAlt, label, link, description, type } = Astro.props
 
 const imageSrc = typeof image === "string" ? image : image?.src
+
+const isVideo = type === "video"
 ---
 
-<a href={link} class={styles.card}>
+<a href={link} class={styles.card} target={isVideo ? "_blank" : "_self"}>
   {
     imageSrc && (
       <div class={styles.imageWrapper}>
         <img src={imageSrc} alt={imageAlt} class={styles.image} />
+        <div class={styles.overlay}>
+          <span class={styles.playButtonWrapper}>
+            <SvgButtonPlay color="card" width={15} height={17.25} />
+          </span>
+        </div>
       </div>
     )
   }
diff --git a/src/components/Resource/ResourceCard.module.css b/src/components/Resource/ResourceCard.module.css
index 475a298cbad..af9c4cc67ad 100644
--- a/src/components/Resource/ResourceCard.module.css
+++ b/src/components/Resource/ResourceCard.module.css
@@ -20,11 +20,36 @@
   background-color: var(--muted);
 }
 
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.playButtonWrapper {
+  background-color: var(--brand);
+  width: 45px;
+  height: 45px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  & svg {
+    color: var(--white);
+    fill: var(--white);
+  }
+}
+
 .imageWrapper {
   width: 100%;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   border-radius: var(--space-2x);
+  position: relative;
 }
 
 .image {

From aaef7b37ac1f55d0288f6fdd35c2d577b4b82df5 Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Fri, 14 Nov 2025 14:55:45 -0500
Subject: [PATCH 2/3] Update ResourceCard.astro

---
 src/components/Resource/ResourceCard.astro | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Resource/ResourceCard.astro b/src/components/Resource/ResourceCard.astro
index aaefec53866..5b37240eb66 100644
--- a/src/components/Resource/ResourceCard.astro
+++ b/src/components/Resource/ResourceCard.astro
@@ -1,6 +1,5 @@
 ---
 import { Typography, SvgArrowRight2, SvgButtonPlay } from "@chainlink/blocks"
-import type { ImageMetadata } from "astro"
 import styles from "./ResourceCard.module.css"
 import { ResourceItem } from "./ResourceGrid.astro"
 

From d121e5f7b9aba6829d0716d26e02c8dadd92349b Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Wed, 19 Nov 2025 12:48:20 -0500
Subject: [PATCH 3/3] Update ResourceCard.astro

---
 src/components/Resource/ResourceCard.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Resource/ResourceCard.astro b/src/components/Resource/ResourceCard.astro
index 5b37240eb66..775abded644 100644
--- a/src/components/Resource/ResourceCard.astro
+++ b/src/components/Resource/ResourceCard.astro
@@ -29,7 +29,7 @@ const isVideo = type === "video"
     <Typography
       variant="body-semi-l"
       style={{
-        marginBottom: "var(--space-8x)",
+        marginBottom: isVideo ? "var(--space-2x)" : "var(--space-8x)",
       }}>{label}</Typography
     >
     <Typography variant="body-s" color="muted">