Merge pull request #207 from authzed/fix-iframe-widths

Fix iframe widths for mobile

globals.css

@@ -5,3 +5,21 @@
 body {
   font-feature-settings: 'rlig' 1, 'calt' 1;
 }
+
+/* https://github.com/tjallingt/react-youtube/issues/242 */
+.youtubeContainer {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%;
+  overflow: hidden;
+  margin-bottom: 50px;
+}
+
+.youtubeContainer iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}

pages/spicedb/getting-started/discovering-spicedb.mdx

@@ -96,17 +96,17 @@ Features that distinguish SpiceDB from other systems include:
   SpiceDB developers and community members have recorded videos explaining concepts, modeling familiar applications, and deep diving on the tech powering everything!
 
   <br />
-  <YouTube videoId="p8xh_z6PUqE" opts={{playerVars:{start: 228}}} />
-  <YouTube videoId="WTfZsRPDv9Q" />
-  <YouTube videoId="x3-B9-ICj0w" />
+  <YouTube videoId="p8xh_z6PUqE" className="youtubeContainer" opts={{playerVars:{start: 228}}} />
+  <YouTube videoId="WTfZsRPDv9Q" className="youtubeContainer" />
+  <YouTube videoId="x3-B9-ICj0w" className="youtubeContainer" />
 
   ### Join the SpiceDB Discord
 
   Thousands of community members chat interactively in our [Discord][discord].
   Why not ask them a question or two?
 
   <br />
-  <iframe src="https://e.widgetbot.io/channels/844600078504951838/844600078948630559" allow="clipboard-write; fullscreen" height="600" width="800"></iframe>
+  <iframe src="https://e.widgetbot.io/channels/844600078504951838/844600078948630559" allow="clipboard-write; fullscreen" className="w-fit min-h-[400px]"></iframe>
 
   [discord]: https://discord.gg/spicedb