Vimeo Layer
💡 Tip: to have an optimized website, we don't suggest inserting more than 12 Vimeo videos into a single page!
IN THIS ARTICLE
You can find the Vimeo layer in the Slide Editor.
You can use this layer to place a Vimeo video to your slide.
Content
General
Vimeo URL or Video ID
The link to your Vimeo video.
Cover image
You can choose an image to cover your Vimeo video, and if you click on it, it will disappear, and the video will start to play.
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.8 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.
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!
Start Time
The time in seconds where the video starts from.
Volume
The volume of your video.
⚠️ Warning: Vimeo now checks whether the current user muted the videos in their last session on Vimeo and might adjust the sound accordingly. If the user muted the video on Vimeo, Vimeo will automatically serve the video without sound and you can't override that.
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.
Loop - Pro
With this option you can make your video start over when it's done.
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
Color
⚠️ Warning: Only works with Pro Vimeo users' videos.
The main color of the displayed options, like the hover color of the play button, the color of the volume and HD buttons, etc..
Remove Controls Pro
⚠️ Warning: Only works with Pro Vimeo users' videos.
Remove the controls from the video.
Title
You can choose to show or hide your video's title, but only if video owner allows it.
Users Byline
You can choose to show or hide your video's user's byline, but only if video owner allows it.
Portrait
Show the author’s profile image, but only if video owner allows it.
Quality
⚠️ Warning: Only works with Pro Vimeo users' videos.
Vimeo returns it's videos in a lower quality, so if you would use your Vimeo layer as a bigger layer, you could increase the video's quality.
Iframe Title
The text you write here will be added to the Vimeo video's <iframe> element as a 'title' attribute. This can be used to improve accessibility.
Play Button - Pro
Play button
If you turn this on, you will have a play button over your cover image.
Width
The width of the play button.
Height
The height of the play button.
Image
You can upload your custom play button image.
Style
Learn about the style options at the Layer Style documentation.
Animations
Learn about the animations at the Animation documentation.
Common issues/questions
Vimeo video doesn't work
The whole link, what you should insert into a Vimeo layer should look like this: https://vimeo.com/196277011, starting with https://vimeo.com/ and ending with the id of the video. If you go to it's page, you see the same Vimeo website layout, what you see on this example's link.
Vimeo cover image is wrong
Vimeo updated its code, which made all its previously used thumbnails/cover images to not work anymore. At the old thumbnail links, now only this image displays:
To resolve this problem, you should go to your Vimeo layers, remove the "Vimeo URL Or Video ID", click next to its field, then put it back. This will regenerate the Vimeo API given image, which should be fine.
How to add private videos?
Your private video can be reached through links similar to these ones:
The first one is the embed link, what you are suggested to use on your website. It contains a "?h=" part with the private ID of the video, that is how you could make sure it is the correct link.
The second one is the link, where you can reach your video on Vimeo. Here the private ID is added to the end of the link.
You can use either of these links in the Vimeo URL or Video ID field.
Why do I see the "Tap to unmute" button?
Vimeo generally adds the "Tap to unmute" button on mobile when the video is muted. The video can be muted because of two reasons:
- the Volume option is set to Mute
- the Autoplay option is enabled (which must mute the video otherwise it could not be played automatically)
In some cases the Remove controls option might also affect this behavior, so it's worth turning it off.
The "Tap to unmute" button is sent by Vimeo with the video itself so from our end there's no option to remove it. Only their provided options can make sure the button is not present, so if you don't want to see this button make sure your video is not muted.
How to use Vimeo videos as slide backgrounds?
You can only use Vimeo video as background, if you have a Vimeo Pro account and you also have Smart Slider Pro. If you do, then:
- Go to your videos, and select the video you want to use.
- As you see here, go to the top dropdown at the video's title → Video file links, where you can copy the mp4 file's link.
- Paste that link into the slide background video field.