Video Layer
In this article
You can find the Video layer in the Slide Editor.
💡 Tip: Check our article, and read more about how you can create a video slider.
☝️ Note: This layer is only available in the Pro version of Smart Slider 3.
You can use this layer to place an MP4 video to your slide. MP4 videos use the browser's native video player.
Looking for the Slide background video option?
Content
General
MP4 Video
Links to your MP4 video. OGG and WebM formats are deprecated, as if some browser doesn't support MP4, they won't support the other two formats either.
Cover Image
The poster attribute of the HTML video tag.
☝️ Note: Chrome started to change how it handles video poster tags and sometimes it doesn't seem to be used. Currently that solution seems to work if you set the Preload option to metadata . For some people using png images instead of jpg images also solved the problem.
Aspect Ratio
You can select the aspect ratio of your video for better responsive behavior. This is especially useful when you're working in Default editing mode.
- 16:9 The video will be displayed with 16:9 aspect ratio
- 16:10 The video will be displayed with 16:10 aspect ratio
- 4:3 The video will be displayed with 4:3 aspect ratio
- Custom: 3.4.1.5 You can set a custom aspect ratio for your video to ensure it displays correctly.
- Fill layer height: The video will fill the height of the layer.
☝️ Note: We recommend not using the Fill layer height aspect ratio, but choosing one of the other options to ensure the best responsive result.
Video settings
Autoplay
If you turn this on, your video will start playing when you go to its slide, and it will stop when you go to another.
⚠️ Warning: Browsers have severe restrictions against autoplaying videos. Learn the details.
When Ended
- Do nothing: No action will be done after the video finishes.
- Go to next slide: The slider will switch to the next slide when the video finishes.
⚠️ Warning: This option is only visible when the Loop is disabled!
Loop
With this option you can make your video start over when it's done.
Volume
The volume of your video.
Restart on Slide Change
If it's turned off, and you switch away from your video, it will only pause, but if you turn this on, it will reset the video to 0 sec.
Display
Fill mode
You can choose how the video's sizing should be inside the video element:
- Fill: The video will cover the entire video area. This means if the video's and its element's ratio will be different, parts of the video will be cut off.
- Fit: The entire video will stay completely visible. If the video's and its element's ratio will be different, there will be empty space, where the video cannot reach.
Controls
You can choose either to show the controls or not.
Centered
If your layer has a different ratio, than your video, then it will be smaller to fit the whole video into it's space. However, if you turn this option on, it will scale the video up so that it will cover the whole layer, and the video will be centered.
Centered off (left) and on (right)
Loading
Preload
- Auto the video will load when the slider loads, even if the slide which has the video is not visible.
- Metadata the video won't load if the slide which has it is not visible, just a "placeholder" will load instead of the video, so it will speed up your website's loading.
- None the video won't start loading until some user interaction happens which starts the video
⚠️ Warning: Safari won't load a preview image for your video, unless auto is set.
Pause on Scroll
You can set the video's behavior on scroll.
- Never The video will not be paused regardless of the slider's visibility
- When partly visible The video will be paused when at least 1px of it is not visible. Scrolling back to the video will continue the play.
- When not visible The video will be paused when none of it is visible. Scrolling back to the video will continue the play.
Play Button
Play Button
- On the play button will show.
- Off the play button won't show.
Width
You can set the width of the play button in pixels.
Height
You can set the height of the play button in pixels.
Image
You can choose an image to display as the play button.
Style
Learn about the style options at the Layer Style documentation.
Animations
Learn about the animations at the Animation documentation.
Frequently Asked Questions
How to make a video layer cover a column?
You might want to create a layout similar to this, that a video covers one of your columns. To do this, you need to do the following:
Step 1
Put down your video layer with absolute positioning.
Step 2
In the layer list drag the video layer to be inside the column.
Step 3
On the Content tab of the video layer you should have Aspect Ratio - Fill layer height, and Fill Mode - Fill.
Step 4
On the Style tab of the video layer, you should enter 0 to the Left and Top values, and 100% to the Width and Height.
And that's it, your video will cover the column! So you can add the mp4 video url, and use the settings you would like to have.