updated reactplayer

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/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>