Attempt to fix mobile for onboard page

components/onboard/youtube-video.js

@@ -1,10 +1,15 @@
 const YoutubeVideo = ({
-  width=560,
-  height=315,
   'youtube-id': youtubeID = 'dQw4w9WgXcQ',
+  list=null,
   title="YouTube video player",
+  width=null,
+  height=null,
 }) => {
-  const src = `https://www.youtube.com/embed/${youtubeID}`
+  const src = new URL(`https://www.youtube.com/embed/${youtubeID}`)
+
+  if (list) {
+    src.searchParams.set('list', list)
+  }
 
   const allowlist = [
     'accelerometer',
@@ -18,13 +23,13 @@ const YoutubeVideo = ({
   ].join('; ')
 
   return (
-    <iframe width={width}
-            height={height}
-            src={src}
-            title={title}
-            frameborder="0"
-            allow={allowlist}
-            allowfullscreen>
+    <iframe
+      src={src}
+      title={title}
+      {...{ width, height }}
+      frameborder="0"
+      allow={allowlist}
+      allowfullscreen>
     </iframe>
   )
 }

pages/onboard/index.js

@@ -13,6 +13,7 @@ import { useEffect, useRef, useState } from 'react'
 import sleep from '../../lib/sleep'
 import Announcement from '../../components/announcement'
 import YoutubeVideo from '../../components/onboard/youtube-video'
+import Icon from '@hackclub/icons'
 
 /**
  * @type {import('theme-ui').ThemeUIStyleObject}
@@ -361,10 +362,15 @@ const ShipPage = () => {
               Never made a circuit board before? No problem.
             </Balancer>
           </Heading>
-          <Flex direction={['column']}>
-            <YoutubeVideo youtube-id="LrSKs35nR8k" />
-            <YoutubeVideo youtube-id="lEcN3JnTge4" />
-            <YoutubeVideo youtube-id="Bh3dm81X_zs" />
+          <Flex sx={{flexDirection:"column"}}>
+            <YoutubeVideo youtube-id="LrSKs35nR8k" list="PLbNbddgD-XxECO7C2z-FAlSoJ57VqcJA3" height="300px" />
+            <Text sx={{ fontSize: 2, color: 'muted' }}>
+              See the{' '}
+              <Link href="https://www.youtube.com/watch?v=LrSKs35nR8k&list=PLbNbddgD-XxECO7C2z-FAlSoJ57VqcJA3" target="_blank">
+                full playlist
+              <Icon glyph="external" size={18} />
+              </Link>
+            </Text>
           </Flex>
           <Text sx={{ fontSize: 3 }}>
             Learn how to design your own circuit boards from scratch with our{' '}