Video Layer

You can find the Video layer in the Slide Editor.

☝️ 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
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.

Style

Responsive

Learn about the responsive options at the Layer Style documentation.

Effect

Learn more about the effect options at the Layer Style documentation.

Position

Learn about the position options at the Layer Style documentation.

Size

Learn about the size options at the Layer Style documentation.

Advanced

Learn more about the advanced options at the Layer Style documentation.

Animations

Learn about the animations at the Animation documentation.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.