From bfdad3a45861b402fa62df9cb8a9c11f40783e79 Mon Sep 17 00:00:00 2001
From: Adam Laki <info@adamlaki.com>
Date: Sat, 2 Mar 2024 14:35:07 +0100
Subject: [PATCH] Remove youtube embed

---
 src/css/main.css                                 | 6 ++++++
 src/docs/getting-started/internationalization.md | 2 +-
 src/scss/section/_post-content.scss              | 9 +++++++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/css/main.css b/src/css/main.css
index 6d126ec..8a9b765 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -3333,6 +3333,12 @@ pre[class*=language-] {
   position: absolute;
   text-transform: uppercase;
 }
+.post-content a[href*=youtube] img {
+  aspect-ratio: 16/9;
+  inline-size: 100%;
+  object-fit: cover;
+  object-position: center;
+}
 
 .cta {
   background-color: var(--spruce-footer-color-background);
diff --git a/src/docs/getting-started/internationalization.md b/src/docs/getting-started/internationalization.md
index a9914d5..9d92b1f 100644
--- a/src/docs/getting-started/internationalization.md
+++ b/src/docs/getting-started/internationalization.md
@@ -13,7 +13,7 @@ The simplest example is the right-to-left (RTL) writing mode used by Arabic and
 
 For more information, check out this excellent introductory video from [Moriel Schottlender](https://twitter.com/mooeypoo) hosted by [Jason Lengstorf](https://www.jason.af/):
 
-<iframe width="600" height="400" src="https://www.youtube.com/embed/OHF2h1_fBCM" title="Right-to Left (RTL) Support for Websites (with Moriel Schottlender) — Learn With Jason" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
+[![Right-to Left (RTL) Support for Websites (with Moriel Schottlender) — Learn With Jason](https://img.youtube.com/vi/OHF2h1_fBCM/hqdefault.jpg)](https://www.youtube.com/watch?v=OHF2h1_fBCM)
 
 ## Logical Properties and Values
 
diff --git a/src/scss/section/_post-content.scss b/src/scss/section/_post-content.scss
index 99d47f8..2d40123 100644
--- a/src/scss/section/_post-content.scss
+++ b/src/scss/section/_post-content.scss
@@ -57,4 +57,13 @@
       text-transform: uppercase;
     }
   }
+
+  a[href*='youtube'] {
+    img {
+      aspect-ratio: 16 / 9;
+      inline-size: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
 }