Full Page Video Block

Settings

The slider on this page is a full page video slider. It plays an MP4 video in the background, behind all the layers. These layers usually contain more important information than the background video. Because of this, it makes sense to put the video in the back. Since the video only serves design purposes, it’s not a big problem if some parts of the video aren’t visible. To ensure that your texts are legible, make sure to use a different font color than what the video’s main color is. To improve the legibility further, you can set an overlay for the video at the layer window.

The slider is suitable as a hero header. All major desktop browsers support MP4 videos, which we use for backgrounds. What’s even better, the modern mobile browsers can play these videos as well. There’s one thing you should be aware of, and it is the way mobile browsers handle videos. They allow only muted videos to play automatically.

Layers

There’s not much content on the slider, so the visitor can focus on the message. There are only 3 layers: a heading on the top, a text layer below that, and an image box which opens a lightbox video.

Animations

Smart Slider 3 Pro has a lightbox feature, which is used on this sample. The lightbox opens the same MP4 video which you can see in the background. Of course, you can put any other video to the lightbox, or an image, or even any URL. Using a lightbox you can allow visitors to enjoy the content without any distraction.

Layout

This slider is a full page slider, so its height and width fill the 100% of your browser on any device. If you want to use it as a homepage slider, and you have a navigation on the top, then you can decrease the height of the slider with the height of your navigation.

Responsive

When you check the slider on mobile, you can see the texts are smaller. This is because of the text scale option which you can set the font size device specifically. With this setting you can make the content legible, and good looking on each device.