Merge pull request #1118 from hackclub/onboard-videos

Add videos to onboard page

components/onboard/youtube-video.js

@@ -0,0 +1,32 @@
+const YoutubeVideo = ({
+  width=560,
+  height=315,
+  'youtube-id': youtubeID = 'dQw4w9WgXcQ',
+  title="YouTube video player",
+}) => {
+  const src = `https://www.youtube.com/embed/${youtubeID}`
+
+  const allowlist = [
+    'accelerometer',
+    'autoplay',
+    'clipboard-write',
+    'encrypted-media',
+    'gyroscope',
+    'picture-in-picture',
+    'web-share',
+    'fullscreen'
+  ].join('; ')
+
+  return (
+    <iframe width={width}
+            height={height}
+            src={src}
+            title={title}
+            frameborder="0"
+            allow={allowlist}
+            allowfullscreen>
+    </iframe>
+  )
+}
+
+export default YoutubeVideo

pages/onboard/index.js

@@ -12,6 +12,7 @@ import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
 import { useEffect, useRef, useState } from 'react'
 import sleep from '../../lib/sleep'
 import Announcement from '../../components/announcement'
+import YoutubeVideo from '../../components/onboard/youtube-video'
 
 /**
  * @type {import('theme-ui').ThemeUIStyleObject}
@@ -360,6 +361,11 @@ 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>
           <Text sx={{ fontSize: 3 }}>
             Learn how to design your own circuit boards from scratch with our{' '}
             <strong>official tutorials</strong> and jams, like Maggie’s{' '}