What is it?

Video Overlay provides a dynamic, full-screen video that plays behind content within a container. It allows for smooth transitions between an initial preview video and the main looping video.

How to set it up?

To configure the Video Background element, you can use the following attributes on the container element:

'data-video-background' ="true". Applied to the container to enable the video background functionality.

'data-video-src'. Specifies the source URL of the video file that will be played in the background.

'data-video-control'="toggle". Applied to an element inside the container to allow users to toggle between play and pause for the main video.

'data-pause-icon'. A class that changes the appearance of the toggle element to a "pause" icon when the video is playing.

Key Features

Automatic Play: The video plays automatically once the container loads.

Muted Playback: The videos (preview and main) are muted by default.

Customizable Button: You can customize the play/pause button using the data-pause-icon attribute to change its appearance.

Responsive Handling: The video resizes and adjusts its position to fit the container, ensuring optimal display without stretching or distortion.