Replace feature image with youtube embed

public/css/styles.css

@@ -189,8 +189,21 @@
     padding-top: 40px;
 }
 
-.feature-photo {
+.feature-video {
+    position: relative;
     margin-top: 10px;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+
+.feature-video iframe {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: calc(100% - 8px);
+    height: calc(100% - 8px);
+    border: 0;
 }
 
 .archive-feature {

src/pages/index.astro

@@ -9,8 +9,6 @@ import CreditsSection from "$components/Home/CreditsSection.astro";
 
 import logoImage from "$assets/images/brand/logo-tenwholeyears.png";
 
-import featureImage from "$assets/images/home/feature.png";
-
 import cardHorseshoesImage from "$assets/images/home/card-horseshoes.png";
 import cardPlatformsImage from "$assets/images/home/card-platforms.png";
 import cardRecroomImage from "$assets/images/home/card-recroom.png";
@@ -51,11 +49,14 @@ import cardRecroomImage from "$assets/images/home/card-recroom.png";
 					</p>
 				</div>
 				<div class="span6">
-					<Image
+					<div class="thumbnail feature-video">
-						src={featureImage}
+						<iframe
-						alt="Beta Frisbee Activity"
+							src="https://www.youtube.com/embed/jEDSRaMcwVQ"
-						class="thumbnail feature-photo"
+							title="TenWholeYears feature video"
-					/>
+							allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+							allowfullscreen
+						></iframe>
+					</div>
 				</div>
 			</div>
 		</section>