Fix YouTube card in "back in block" blog post (#854)

aidenybai · Dec 31, 2023 · 774f6bb · 774f6bb · vercel · Dec 31, 2023
1 parent 8b75c1b
commit 774f6bb
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/website/pages/blog/virtual-dom.mdx b/website/pages/blog/virtual-dom.mdx
@@ -20,7 +20,6 @@ import { CarbonAds } from '../../components/ad';
   </a>
 </div>
 
-
 <div className="flex flex-col items-center gap-4">
 
 # Virtual DOM: Back in Block
@@ -37,8 +36,12 @@ import { CarbonAds } from '../../components/ad';
 
 <br />
 
-<div className="flex justify-center">
-  <YouTube videoId="VkezQMb1DHw" opts={{ start: 73 }} />
+<div className="lg:w-7/12 text-center mx-auto flex justify-center">
+  <YouTube
+    className="youtubeContainer"
+    videoId="VkezQMb1DHw"
+    opts={{ start: 73 }}
+  />
 </div>
 
 ---

diff --git a/website/styles/global.css b/website/styles/global.css
@@ -676,10 +676,8 @@ li > a {
 .youtubeContainer {
   position: relative;
   width: 100%;
-  height: 0;
-  padding-bottom: 56.25%;
+  aspect-ratio: 16 / 9;
   overflow: hidden;
-  margin-bottom: 50px;
 }
 
 .youtubeContainer iframe {