src/components/VideoGuide.vue - master - itp_practice/itp_frontend

src/components/VideoGuide.vue
76 строк2 KB
Soupik
improve ui
28 май 2025, 17:27
28 май 2025, 17:278804fe1
<template>
  <section class="video-guide bg-bg-dark py-24" id="video">
    <div class="container">
      <h2 class="section-title text-4xl text-center mb-10">Пошаговая инструкция для пользователя</h2>
      <div class="video-container relative w-full pb-[56.25%] mb-10 overflow-hidden rounded-lg shadow-2xl">
        <iframe 
          class="video-iframe absolute top-0 left-0 w-full h-full border-0" 
          :src="videoUrl" 
          :title="videoTitle" 
          frameborder="0" 
          allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
          allowfullscreen
        ></iframe>
      </div>
      <div class="video-guide__actions flex justify-center gap-5 flex-wrap">
        <a href="#" class="btn btn--primary btn--lg">Начать</a>
        <a href="#faq" class="btn btn--outline btn--lg">FAQ</a>
        <a href="#support" class="btn btn--outline btn--lg">Связаться с поддержкой</a>
      </div>
    </div>
  </section>
</template>

<script setup>
const props = defineProps({
  videoUrl: {
    type: String,
    default: 'https://player.vimeo.com/video/1055321236?badge=0&autopause=0&player_id=0&app_id=58479'
  },
  videoTitle: {
    type: String,
    default: 'Пошаговая инструкция для пользователя'
  }
});
</script>

<style scoped>
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  margin-bottom: 2.5rem;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-guide__actions {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .video-guide__actions {
    flex-direction: column;
    align-items: center;
  }
  
  .video-guide__actions .btn {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
}
</style>