feat(videos): add promo video to home and course intro pages

Author: jslvtr

docs/docs/01_course_intro/index.md

@@ -4,6 +4,10 @@ id: intro
 
 # REST APIs with Flask and Python
 
+import VideoEmbed from "@site/src/components/VideoEmbed";
+
+<VideoEmbed url="https://customer-zmitazl0ztnd2pvm.cloudflarestream.com/1c4db6119cf0c6e682a88a737af146eb/iframe?poster=https%3A%2F%2Fcustomer-zmitazl0ztnd2pvm.cloudflarestream.com%2F1c4db6119cf0c6e682a88a737af146eb%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600" />
+
 Hi, and welcome!
 
 REST APIs with Flask and Python is a complete course that teaches you how to develop complete, professional REST APIs using **Flask**, **PostgreSQL**, and **Docker**.

docs/src/components/VideoEmbed/index.js

@@ -0,0 +1,23 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+export default function VideoEmbed({ url }) {
+  return (
+    <div style={{ position: "relative", paddingTop: "56.25%" }}>
+      <iframe
+        src={url}
+        style={{
+          border: "none",
+          position: "absolute",
+          top: "0",
+          left: "0",
+          height: "100%",
+          width: "100%",
+        }}
+        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
+        allowfullscreen="true"
+      ></iframe>
+    </div>
+  );
+}

docs/src/components/VideoEmbed/styles.module.css

@@ -5,6 +5,7 @@ import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import VideoEmbed from "@site/src/components/VideoEmbed";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -35,6 +36,15 @@ export default function Home() {
     >
       <HomepageHeader />
       <main>
+        <div
+          style={{
+            border: "4px solid black",
+            maxWidth: "800px",
+            margin: "4rem auto 4rem auto",
+          }}
+        >
+          <VideoEmbed url="https://customer-zmitazl0ztnd2pvm.cloudflarestream.com/1c4db6119cf0c6e682a88a737af146eb/iframe?poster=https%3A%2F%2Fcustomer-zmitazl0ztnd2pvm.cloudflarestream.com%2F1c4db6119cf0c6e682a88a737af146eb%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600" />
+        </div>
         <HomepageFeatures />
       </main>
     </Layout>