IntroVideo.vue

<template>
  <div class="intro-video container pt-0 mt-0">
    <div class="row mb-xl-3 justify-content-center">
      <h2 class="col-12 py-0 intro-padding">
        What can Platform One do for you?
      </h2>
    </div>

    <div class="container pa-0 padding-video-section">
      <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8 order-lg-2">
          <v-responsive :aspect-ratio="16 / 9" min-height="200">
            <video
              width="100%"
              poster="@/assets/images/P1_Into_Thumbnail.jpg"
              controls
            >
              <source
                src="https://repo1.dso.mil/platform-one/bullhorn-delivery-static-assets/-/raw/master/p1/PlatformOne-90sec-Initial-V1-1.mp4"
                type="video/mp4"
              />
              Your browser does not support the video tag.
            </video>
          </v-responsive>
        </div>

        <div class="col-lg-6 text-left px-12 d-flex pt-6">
          <div class="row">
            <span>
              Platform One (P1) is a modern cloud-era platform that provides
              valuable tooling, hosts
              <Tooltip
                text="CI/CD"
                tooltip="Continuous Integration / Continuous Delivery"
              />
              <Tooltip
                text="DevSecOps"
                tooltip="Development, Security, and Operations"
              />
              pipelines, and offers a secure Kubernetes platform for hosting
              microservices.
              <br />
              <br />

              Authorization to go live with your application can be achieved
              faster than ever by using Iron Bank hardened containers and P1
              pipeline security tools. The resulting Certificate to Field (CtF)
              and Continuous Authority to Operate (cATO) provides developers the
              ability to push validated code into production on an ongoing
              basis. This results in shorter development cycles, less debugging,
              and more rapid feature development.
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Tooltip from "@/components/Base/Tooltip";
export default {
  name: "IntroVideo",
  components: { Tooltip }
};
</script>
<style lang="scss" scoped>
.intro-padding {
  margin-top: 58px;
}
.padding-video-section{
  margin-top: 23px;
}
.intro-video {
  .p1-logo {
    max-height: 180px;
    max-width: 180px;
    margin-bottom: 2rem;
  }
}
</style>