Section Top Video

The VSectionTopVideo component creates a visually captivating hero section with optional video background, customizable content, and a call-to-action button.

Props

Name	Type	Required	Description
`title`	`String`	`false`	The main title displayed in the section.
`subTitle`	`String`	`false`	Subtitle text, rendered as HTML.
`text`	`String`	`false`	Introductory or descriptive text displayed above the title.
`slider`	`Array`	`false`	Optional slider data (not implemented in the provided code).
`videoSrc`	`String`	`false`	Source URL for the video to be played in the background.
`buttonHref`	`String`	`false`	URL for the call-to-action button.
`buttonText`	`String`	`false`	Text displayed on the call-to-action button.
`contentClass`	`String`	`false`	Additional class applied to the content container.
`fullHeight`	`Boolean`	`false`	Sets the section height to fill the viewport.
`videoCoverImage`	`String`	`false`	URL for the fallback background image when the video is unavailable.

Features

Dynamic Content:
- Title, subtitle, and descriptive text are customizable via props.
- Optional slot for overriding content, including the button.
Video Background:
- Displays a looping, autoplaying, and muted video in the background.
- Fallback image is used as the background if no video is provided.
Call-to-Action Button:
- Button can link to an external URL (buttonHref) and display an optional slot for content.

Content and Slots

The template is structured as follows:

Video Background: Positioned absolutely, styled to cover the entire section.
Content Section:
- Displays text content, including title, text, and subTitle.
- Includes an optional call-to-action button.
Slots:
- Default: Custom content replacing the default structure.
- buttonText: Custom content for the button text.

Example Usage

vue

<script setup lang="ts">
import VSectionTopVideo from 'UiKit/components/VSectionTop/VSectionTopVideo.vue';
import video from '@/assets/video/video-bg.mp4';
</script>
<template>
  <VSectionTopVideo
    title="Welcome to Our Platform"
    subTitle="Innovative Solutions for Modern Challenges"
    text="Explore how we can transform your business."
    :videoSrc="video"
    videoCoverImage="/images/main-header-banner.webp"
    buttonHref="/contact"
    buttonText="Get Started"
    fullHeight
  />
</template>

Explore how we can transform your business.

Welcome to Our Platform

Innovative Solutions for Modern Challenges

Get Started