In this tutorial you will see how to add videos from Vimeo on the Revolution Slider WordPress plugin layers by layers and how to set it up on your responsive slider to be a background-video full-screen style with an auto-play mode, you also will see where to mute the video.
Vimeo On Revolution Slider
Yes, Slider Revolution supports Vimeo: when you’re adding a new Layer to your slider, select “Video”, enter the video page URL, and click “search”.
Locating Vimeo IDs: Go to the webpage of the video you want to use and copy the numbers on the end of the video URL after the trailing / These numbers are the Vimeo ID, and should look something like 4446067
In the Layer Options tab, Content subsection, and Media Poster panel, click the Vimeo Thumbnail button: Slider Revolution retrieves a Vimeo video thumbnail and sets it as a media poster: Alternatively, you can choose your own use of the media library, or choose one of the images in Slider Revolution’s object library: if you have selected an image you don’t want, go to the Layer Options tab, Content subsection, and Media Poster panel, and then click the Remove Poster button.
1. Add Video Layer: Vimeo in Revolution Slider
2. Vimeo Source
Enter the Vimeo ID or full URL, then click the “Search” button.
3. Vimeo Sizing: Videos in Revolution Slider
Full Screen
OFF = Vimeo’s video iframe will be whatever width and height you choose (see Layer Styles).
ON = Vimeo’s video iframe will cover the entered size of the slider (width and height will both automatically set to 100%).
Force Cover
OFF = Video will have a CSS background size of “contain”. This means the video will never crop, but depending on the video’s original size ratio in relation to the slider’s actual size, blank space on the sides of the video may occur.
ON = Video will have a CSS background-size of “cover”. This means the video will always cover the entire size of the slider, but depending on the video’s original size ratio in relation to the slider’s actual size, video cropping may occur.
Dotted Overlay *
Choose to display a “mesh-like” transparent graphic on top of the video, adding some extra style to the video.
* only applicable if “Force Cover” is “On”.
Aspect Ratio *
Vimeo offers 2 versions of the video that can load which are 16×9 or 4×3. For video backgrounds, 16×9 is usually best.
* only applicable if “Force Cover” is “On”
4. Vimeo Settings: Videos in Revolution Slider
Loop Video
Disable:
The video will only play once each time the video initially play.
Loop – Slide is paused:
Video will loop endlessly, and the slide will never change unless the slider’s navigation is used (next button clicked, etc.).
Loop – Slide does not stop:
Video will loop endlessly until the slide’s delay is reached. For example, if your slide’s are normally meant to be shown for 10 seconds, but your video’s length is only 5 seconds, the video will play twice before the slide actually changes.
Autoplay
Choose to autoplay the video when it animates into view.
Or choose On 1st Time to autoplay only the first time the slide is shown.
Or choose Not on 1st Time to only autoplay after the slide is shown at least once.
Stop Other Videos
If more than one videos are present on the slide at the same time, choose this option to make sure only one video can play at a time.
Next Slide on End
>ON: Slide will immediately change as soon as the video ends.
OFF: If the video’s length is less than the slide’s delay, the slide will not change until the delay time has been reached.
Rewind At Slide Start
ON: Video will always start from the beginning each time the slide is shown.OFF: Once the video plays, if the slide is changed before the video actually ends when coming back to the same slide, the video will resume playing from the same point.
Hide Controls
ON: No controls will be shown for the video.
OFF: Video will show the normal default Vimeo player controls.
Mute Video
Choose to mute the video’s volume if it normally has sound.
Volume (0-100) Vimeo in Revolution Slider
Set the default volume level for the video.
Start At / End At
Choose to start and/or end the video at a specific time, in minutes:seconds format.
Example “Start At” value: 00:17 (start the video 17 seconds in)
Example “End At” value: 02:17 (end the video at 2 minutes, 17 seconds)
Show Cover at Pause
Show the video’s preview image (see Visibility section) whenever the video is paused.
5. Vimeo Visibility
Quick Tip for Vimeo in Revolution Slider
For optimal performance, always use a preview image! This way the video will only load from Vimeo.com when the video actually plays.
Preview Image
Enter a custom URL, or click the “Image Library” button to choose an image from the WP Media library.
Or choose “Video Thumbnail”, which will then automatically load the video’s preview image from Vimeo.com.
Disable Mobile
Choose to disable the video for mobile devices (the video layer will simply not be shown).
Only Preview on Mobile
When enabled, only the video’s preview image will be shown on mobile devices (the video will never be loaded).
Play Button for your Preview Images
Use the following technique to display a play button on top of your preview images.
- Download this PSD and extract its play button graphic, or create your own.
- Resize the play button to 76×43 in Photoshop.
- Upload the button graphic to your site, and make note of its URL location.
- Add the following CSS to the slider’s Custom CSS section.
.tp-caption .tp-videoposter:after {
background-image: url(http://site.com/wp-content/uploads/2015/07/vimeo.png);
background-position: center center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 50%;
margin: -22px 0 0 -38px;
content: “”;
width: 76px;
height: 43px;
}
6. Vimeo Arguments
Additional parameters can be passed to the video from this list.
Useful options from the list are “color” and “title” (see link above for descriptions of these params).
To add an additional parameter, prepend it to the beginning of the default params string.
For example, this:
title=0&byline=0&portrait=0&api=1
would become this:
color=00adef&title=0color=00adef&&byline=0&portrait=0&api=1
All the Visualmodo WordPress themes come with the Revolution Slider premium WordPress plugin for free while our themes usage.
