fix(docs): inflight magazine videos (#595)

Playing mp4 videos using a relative path sucks. I think it has something
to do with webpack I dunno 🤷 but basically I found that if I import the
mp4 using an import statement that it works..

Also for styling I could not get the margins to look nice with just the
`<video>` tag so I opted to bring in `ReactPlayer`

# Docs updates should not be submitted in this repository

Our doc site content is being automatically updated from
[Wing](https://github.com/winglang/wing) repository docs folder.

Please submit any changes to the docs as a PR
[here](https://github.com/winglang/wing/pulls)

blog/2023-08-30-magazine-004.md

@@ -6,6 +6,9 @@ authors:
 tags: [cloud-oriented programming, winglang, changelog, newsletter,]
 hide_table_of_contents: true
 ---
+import ReactPlayer from "react-player";
+import multi_file_errors_mp4 from "./assets/2023-08-30-magazine-004/multi-file-errors.mp4";
+
 > The 4th issue of the Wing Inflight Magazine.
 > <!--truncate-->
 
@@ -70,18 +73,14 @@ In an effort to accelerate our development processes, we transitioned from Nx to
 ❤️ Added by [Chris Rybicki](https://github.com/Chriscbr) ❤️
 <br />
 We’ve been working to enhance and improve Wing’s multi-file support and have just introduced the latest update. Despite an initial challenge that led to a rollback, the new multi-file support allows classes, structs, types, and other declarations to be shared across different files. Now, developers can now better organize their code, reducing naming collisions and improving composability.
-
-<video autoplay muted loop>
-  <source src="./assets/2023-08-30-magazine-004/multi-file-errors.mp4" type="video/mp4"/>
-</video>
+<br /><br />
+<ReactPlayer width="100%" height="100%" playing loop muted url={multi_file_errors_mp4}/>
 
 ### Integrated Console in VSCode: 
 
 We've improved the integration of the console within VSCode, moving beyond the basic iFramed version. This update offers developers better screen utilization. We're also working on further refinements for smoother integration in the future.
 
-<video autoplay muted loop>
-  <source src="https://github.com/winglang/wing/assets/5547636/0a787216-8c10-48d8-b42b-7d1020c85c9d" type="video/mp4"/>
-</video>
+<ReactPlayer width="100%" height="100%" playing loop muted url="https://github.com/winglang/wing/assets/5547636/0a787216-8c10-48d8-b42b-7d1020c85c9d"/>
 
 ### Summary
 That’s a wrap for this update!

package.json

@@ -32,7 +32,8 @@
     "react-dom": "^17.0.2",
     "sass": "^1.54.4",
     "semver": "^7.3.7",
-    "ts-jest": "^28.0.8"
+    "ts-jest": "^28.0.8",
+    "react-player":"^2.13.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.0.1",