initial video section

src/components/IntroVideo.vue

+<template>
+  <div class="intro-video">
+    <div class="row mt-5 mb-xl-3 justify-content-center">
+      <h2 class="col-12">What can Platform One do for you?</h2>
+      <p class="col-xl-6 col-lg-8 text-center">
+        Watch our 90 second video to learn more about P1 capabilities
+      </p>
+    </div>
+
+    <div class="container">
+      <div class="row justify-content-center">
+        <div
+          class="col-lg-6 col-md-8 embed-responsive embed-responsive-16by9 order-lg-2 px-5 mb-4 mb-lg-0"
+        >
+          <iframe
+            class="embed-responsive-item"
+            src="https://www.youtube.com/embed/yUOjL7G9mIg?rel=0"
+            allowfullscreen
+          ></iframe>
+        </div>
+
+        <div class="col-lg-6 text-left px-5 d-flex">
+          <ul class="my-auto">
+            <li class="my-3">
+              P1 accelerates your deployment capabilities by providing an 85%
+              solution to get you started faster
+            </li>
+            <li class="my-3">Provides a common code base for reusability</li>
+            <li class="my-3">
+              Creates a collaborative environment to break down silos and enable
+              government-wide cross-functionality
+            </li>
+            <li class="my-3">
+              P1 helps deploy your mission code to the warfighter quickly and
+              securely
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "IntroVideo",
+  components: {}
+};
+</script>
+<style lang="scss" scoped>
+.intro-video {
+  padding-bottom: 5rem;
+
+  .p1-logo {
+    max-height: 180px;
+    max-width: 180px;
+    margin-bottom: 2rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    .embed-responsive {
+      min-height: 330px;
+    }
+  }
+}
+</style>

src/views/Home.vue

@@ -4,7 +4,7 @@
       title="PLATFORM ONE"
       description="An official DoD DevSecOps Enterprise Services team"
     />
-    <img class="img-fluid p1-logo" :src="`${publicPath}/static/p1-logo.png`" />
+    <IntroVideo />
     <ProductsSummary />
     <ServicesSummary />
     <BottomWave>
@@ -15,6 +15,7 @@
 
 <script>
 import PageHeader from "@/components/PageHeader";
+import IntroVideo from "@/components/IntroVideo";
 import ServicesSummary from "@/components/ServicesSummary";
 import ProductsSummary from "@/components/ProductsSummary";
 import WhoWeServe from "@/components/WhoWeServe";
@@ -24,25 +25,17 @@ export default {
   name: "Home",
   components: {
     PageHeader,
+    IntroVideo,
     ServicesSummary,
     ProductsSummary,
     BottomWave,
     WhoWeServe
-  },
-  data() {
-    return {
-      publicPath: process.env.BASE_URL
-    };
   }
 };
 </script>
 
 <style lang="scss" scoped>
 .home {
-  .p1-logo {
-    max-height: 180px;
-    margin-bottom: 2rem;
-  }
   .page-header {
     margin-bottom: 5rem !important;
   }