site_logiciels/components/Common/ContainerVideo.vue

<template>
  <LayoutContainer>
    <div v-if="videoUrl" class="container-green">
      <v-row class="mt-12">
        <v-row>
          <v-col cols="6">
            <LayoutUISubTitle class="mt-6">
              {{ title }}
            </LayoutUISubTitle>

            <p v-if="lgAndUp" class="quote">
              {{ quote }}
            </p>
          </v-col>

          <v-col cols="6">
            <div class="screen-img-3" />

            <div class="play-icon-container">
              <i class="fas fa-play"></i>
            </div>
          </v-col>
        </v-row>
      </v-row>
    </div>

    <div v-else></div>
  </LayoutContainer>
</template>

<script setup lang="ts">
import { useDisplay } from 'vuetify'

const { lgAndUp } = useDisplay()

defineProps({
  title: {
    type: String,
    required: true,
  },
  quote: {
    type: String,
    required: true,
  },
  videoUrl: {
    type: String,
    default: '',
  },
})
</script>

<style scoped lang="scss">
.v-container {
  padding: 0 !important;
}

.v-row {
  width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.play-icon-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #ffffff;
  cursor: pointer;
}

.screen-img-3 {
  background-image: url('/images/components/presentation/Opentalent-disponible-su-Multi-support.png');
  background-size: cover;
  background-position: center;
  width: 650px;
  height: 650px;

  @media (max-width: 1240px) {
    width: 400px;
    height: 400px;
  }
}

.quote {
  font-style: italic;
  font-weight: 300;
  font-size: 2rem;
  width: 35rem;
  line-height: 40px;
  color: #ffffff;
  margin-top: 27rem;
  margin-left: 2rem;
}

.icon-logiciel {
  margin-right: 1rem;
}

.container-green {
  background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
    rgba(7, 27, 31, 0.3);
  height: 40rem;

  @media (max-width: 1240px) {
    height: 400px;
  }
}
</style>