use react video player

website/components/io-video-callout/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import Image from 'next/image'
+import ReactPlayer from 'react-player'
 import VisuallyHidden from '@reach/visually-hidden'
 import IoDialog from 'components/io-dialog'
 import PlayIcon from './play-icon'
@@ -61,15 +62,18 @@ export default function IoVideoCallout({
         onDismiss={hideVideo}
         label={`${heading} video}`}
       >
+        <h2 className={s.videoHeading}>{heading}</h2>
         <div className={s.video}>
-          <iframe
+          <ReactPlayer
+            url={`https://www.youtube.com/embed/${youtubeId}`}
+            playing={true}
             width="560"
             height="315"
-            src={`https://www.youtube.com/embed/${youtubeId}`}
-            title="YouTube video player"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            frameBorder="0"
-          ></iframe>
+            style={{
+              maxWidth: '100%',
+            }}
+            controls={true}
+          />
         </div>
       </IoDialog>
     </>

website/components/io-video-callout/style.module.css

@@ -114,6 +114,13 @@
   color: var(--gray-3);
 }
 
+.videoHeading {
+  margin-top: 0;
+  margin-bottom: 32px;
+  padding-right: 100px;
+  composes: g-type-display-4 from global;
+}
+
 .video {
   position: relative;
   background-color: var(--gray-2);

website/package.json

@@ -39,7 +39,8 @@
     "next-remote-watch": "1.0.0",
     "react": "^17.0.2",
     "react-datocms": "^1.6.6",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-player": "^2.9.0"
   },
   "devDependencies": {
     "@hashicorp/platform-cli": "^1.2.0",