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 helps deploy your mission code to the warfighter quickly and
              securely
            </li>
            <li class="my-3">
              P1 accelerates your deployment capabilities by providing an 85%
              solution to get you started faster
            </li>
            <li class="my-3">P1 provides a common code base for reusability</li>
            <li class="my-3">
              P1 creates a collaborative environment to break down silos and
              enable government-wide cross-functionality
            </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>