Slide 1
Video Slider Examples in Smart Slider 3

Smart Slider 3 allows you to create various video slides to your website such as YouTube, Vimeo and HTML5 videos.

Fullpage Video Block

💻 Settings | 🎓 Layers | 🎉 Animations | 🏗️ Layout | 📱 Responsive | Speed

Description: Smart Slider 3 is a great way to create a stunning video slider for your WordPress website. YouTube, Vimeo and MP4 videos are all supported.

Premium: Gain access to all slider templates with a single purchase.

Minimum version: 3.4.1.6

Tags:

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.

Settings of the background video

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.

Layers of the slider

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.

Lightbox options

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.

Decrease slider height

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.

Text scale

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!

99

Desktop

First Contentful Paint
0.7 s
Speed Index
0.7 s
Largest Contentful Paint
0.7 s
Time to Interactive
0.7 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.037
99

Mobile

First Contentful Paint
0.9 s
Speed Index
0.9 s
Largest Contentful Paint
2 s
Time to Interactive
0.9 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.004

Related Post: What is a Full Page Slider and How to Use it?

Related Post: Why do You Need a Video Slider on Your Website?


Similar Sliders -

Lawyer SliderVideo ParticleLayer SliderFree YouTube Slider