Add startup screen video to homepage

Author: hach-que

src/pages/index.tsx

@@ -6,6 +6,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import styles from "./styles.module.css";
 import { Feature, FeatureList } from "../Feature";
+import ReactPlayer from "react-player";
 
 function Home() {
   const context = useDocusaurusContext();
@@ -254,12 +255,30 @@ function Home() {
                       Automatically keep party members up-to-date in your lobby
                       screen using the <code>RedpointPartyMember</code> actor.
                     </li>
+                    <li>
+                      Bind the friends list and party members to a UMG tree view
+                      widget; we'll keep entries up-to-date and you can focus on
+                      design.
+                    </li>
                   </ul>
                 </Feature.Describer>
                 <Feature.Visual>
-                  <a href="#" target="_blank">
-                    <img src="#" className={classnames(styles.featureImage)} />
-                  </a>
+                  <div className={classnames(styles.featureImage)}>
+                    <ReactPlayer
+                      playing
+                      loop
+                      muted
+                      url={useBaseUrl("img/features/startup.mp4")}
+                      width="100%"
+                      height="auto"
+                      style={{
+                        marginTop: "1em",
+                        marginBottom: "1em",
+                        // fixes weird extra bottom margin around videos
+                        display: "flex",
+                      }}
+                    />
+                  </div>
                 </Feature.Visual>
               </Feature>
               <Feature>