Merge pull request #110 from eviltester/dependabot/npm_and_yarn/react-player-3.4.0

Bump react-player from 2.16.0 to 3.4.0

Author: eviltester

docs-src/blog/2022-06-20-overview-video.mdx

@@ -22,4 +22,10 @@ This explains how to use Faker, and the approach I use when creating test data.
 
 The overview video is also embedded below:
 
-<ReactPlayer controls url='https://www.youtube.com/watch?v=E8lYiPEugJQ' />
+<ReactPlayer
+  controls
+  src='https://www.youtube.com/watch?v=E8lYiPEugJQ'
+  width='100%'
+  height='100%'
+  style={{ width: '100%', maxWidth: '960px', aspectRatio: '16 / 9', margin: '0 auto' }}
+/>

docs-src/docs/040-test-data/030-faker-test-data.mdx

@@ -16,7 +16,13 @@ The values shown in the 'type' drop down menu match the values in the Faker.js A
 
 ## Tips Video
 
-<ReactPlayer controls url='https://www.youtube.com/watch?v=E8lYiPEugJQ' />
+<ReactPlayer
+  controls
+  src='https://www.youtube.com/watch?v=E8lYiPEugJQ'
+  width='100%'
+  height='100%'
+  style={{ width: '100%', maxWidth: '960px', aspectRatio: '16 / 9', margin: '0 auto' }}
+/>
 
 ## Read The Faker API Docs
 
@@ -222,5 +228,3 @@ helpers.fake('{{location.buildingNumber}} {{location.streetAddress}}')
 - [Regex Based Data](/docs/test-data/regex-test-data)
 
 
-
-

docs-src/docs/060-videos/faker-test-data.mdx

@@ -8,4 +8,10 @@ import ReactPlayer from 'react-player'
 
 # Generating Test Data With Faker
 
-<ReactPlayer controls url='https://www.youtube.com/watch?v=E8lYiPEugJQ' />
+<ReactPlayer
+  controls
+  src='https://www.youtube.com/watch?v=E8lYiPEugJQ'
+  width='100%'
+  height='100%'
+  style={{ width: '100%', maxWidth: '960px', aspectRatio: '16 / 9', margin: '0 auto' }}
+/>

docs-src/package.json

@@ -22,7 +22,7 @@
     "prism-react-renderer": "2.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-player": "2.16.0"
+    "react-player": "3.4.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.10.1"

docs-src/src/pages/index.js

@@ -34,7 +34,13 @@ function ShowCaseVideo({title, description, videourl}) {
         <div className="text--center">
           <h2>{title}</h2>
           <p>{description}</p>
-        <ReactPlayer style={{margin: "auto"}} controls url={videourl} />
+        <ReactPlayer
+          controls
+          src={videourl}
+          width="100%"
+          height="100%"
+          style={{width: "100%", maxWidth: "960px", aspectRatio: "16 / 9", margin: "0 auto"}}
+        />
         </div>
       </div>