Adding and Configuring Video Layers
You already learned the basics of working with video layers in Slider Revolution. Now in this guide learn all the extra ways you can configure custom video content.
Table of Contents
- Adding a New Video Layer
- Topic Recap: Video Basics
- Additional Media Content Settings
- Additional Media Poster Settings
- Overlay
- Advanced Media Settings
- Arguments
- HTML Tag
- Convert to Image
Adding a New Video Layer
To add a new video layer [?]
Layers are containers for visual, audio or layout items and are added to slides. For example, text, button, image, audio, video, group and row are all types of layers.
Layers are added to slides via the module editor. go to the Add Layer button in the top toolbar, then click the Video button:
Topic Recap: Video Basics
We previously covered many of the essentials of working with video layers as part of our intermediate guide on swapping videos in template [?]
A "Template" is a premade module. It has pre-configured layers already in place.
It is designed to be ready for use, either as is or after being modified in the module editor.
Slider Revolution comes with several templates you can use, or alternatively you can create your own templates, thereby allowing you to easily reuse modules you have produced. based modules [?]
A module in Slider Revolution acts as a container for slides, which in turn act as containers for layers. Modules are created and edited with the module editor.
A "module" is a single, self contained piece of content. You can think of this as being similar to the way a post or page in regular WordPress is a self contained piece of content.
A module can represent any kind of content Slider Revolution is capable of creating, such as a slider, carousel, hero unit, navigation menu, posts display and so on.
Multiple modules can be combined to form rich content such as complete sites and landing pages..
To quickly jump to some of the main topics from that guide, follow any of the links below:
- Adding HTML5 videos
- Adding YouTube or Vimeo videos
- Handling media posters
- Dealing with cross site origin
If you haven’t yet familiarized yourself with the above you should do so before reading on.
In this guide we’ll be further expanding on some of these topics, looking at video configuration we haven’t yet talked about.
Additional Media Content Settings
As well as the settings we covered previously in every video layer’s Media Content panel, there are some additional options available. Let’s take a look at them now.
Video Fit Cover (HTML5 Videos Only)
Toggling this option to ON ensures that the video will entirely cover the area of its container, regardless of the aspect ratio of the video. When this layout mode is activated, the vertical or horizontal edges of the video may be hidden if needed to ensure complete coverage:
This option is on by default and should generally be left that way. The exception is if you are using a video with a very unusual aspect ratio and notice the video changes in size or zooms unexpectedly when transitioning between slides [?]
A "slide" in Slider Revolution is a container into which multiple layers can be added, with layers in turn acting as containers for various forms of media such as images, text, video, audio, buttons, and special effects.
Slides are added to modules and edited via the module editor.
Within the module editor, each slide has its own animation timeline, background and collection of layers.
A single module can have one or many slides. A module with one slide is called a scene, and a module with multiple slides is called a slider or carousel..
Preload
The Preload option allows you to set whether a video or its metadata should be loaded in advance of playback:
There are three available settings:
1) Auto – Loads the whole video in advance, even if it is never viewed.
2) Disabled – Prevents any preloading. The video will load only when it’s played.
3) Meta Data – Preloads meta data about the video, that being information such as its length. The video itself will still only load when played.
Note: If the video is set to autoplay, it will override any preload settings.
Aspect Ratio
This option allows you to control the aspect ratio of the video. It has four available settings: “16:9”, “4:3”, “1.85:1” and “2.39:1”.
This option should be set to match the aspect ratio of the original video, and in most cases you will find it has been set to the correct value automatically. However, if you do want to change the aspect ratio for stylistic purposes you can do so here.
Auto Play
Set if, and when, the video should auto play:
There are four auto play settings available:
1) Off – Don’t auto play the video. It will instead need to be manually played by the visitor, or triggered to play by an action.
2) On – Auto play the video as soon as the slide it’s on appears, and it has finished loading.
3) Only 1st Time Slide Shown – Auto play the video as soon as the slide it’s on appears, but only once.
4) On – Skip 1st Time Slide – Auto play the video, but only after the second time the slide it’s on appears.
Note: Even if a video is set to autoplay, it’s not possible to make it autoplay with sound switched on. Sound has to be triggered by an interaction from the visitor. To learn more about autoplaying and video sound read our guide on “Handling Sound and Control Quirks on Audio & Video Layers“.
Additional Media Poster Settings
In our Intermediate Editing guide we covered the basics of how to set a media poster using either a YouTube / Vimeo thumbnail or an image of your own. There are a few additional options you can also use when configuring your media posters. Let’s take a look at them.
Image Size
The Image Size option allows you to select from among multiple size variants of your media poster image. You should try to use the smallest variant that still looks good, in order to maximize load speed.
This option will appear if the media poster image is from your own site, as opposed to being a YouTube / Vimeo thumbnail. This will be the case if you select an image from the Media Library or Object Library, and is the default on HTML5 videos.
Poster in Pause
When toggled to ON this option will make the media poster appear any time the video is paused.
This will take effect both when the user has pressed a pause button, or when the module changes between slides.
No Poster on Mobile
Toggle this option to ON if you don’t want the media poster image to appear on mobile devices, showing it only on desktop computers.
This can be a way to minimize loading time on less powerful devices.
Only Poster on Mobile
Toggle this option to ON if you only want the media poster image to appear on mobile devices, hiding it on desktop computers.
Overlay
The overlay option gives you a quick and easy way to add a cool film screen pattern effect on your videos.
There are four options to configure to control the appearance of your overlay and they are as follows:
Overlay
There are 7 different overlay patterns to choose from. Select one from this dropdown:
Size
This option controls the size of the repeating elements in the overlay pattern. It represents size in pixels and can be set to any whole number:
Color 1 and Color 2
All overlay patterns are comprised of two colors, each selectable via these two options:
Bear in mind that if both colors are set to be fully opaque you won’t be able to see anything through your overlay. As such, at least one of the two colors should be partially or completely transparent.
Advanced Media Settings
The Advanced Media Settings panel gives us a collection of additional fine-grained controls over how videos look and behave:
Stop Other Media
When this option is toggled to ON, if there are any other video or audio layers in the slide they will stop when this layer’s video begins to play:
Allow Fullscreen
Allow a user to view the video in full screen mode. When this option is toggled to ON, a button will appear in the video’s controls allowing full screen mode to be activated:
Pause Timer During Play
This option allows the slide timer to be paused while the video is playing.
Toggling this option to ON ensures that the module won’t transition to the next slide while the user is partway through viewing the video:
Loop Media
If this option is toggled to ON, after the video has completed it will start again at the beginning:
Next Slide at End
If this option is toggled to ON, after the video has completed the module will transition to the next slide:
Rewind at Start
This option is useful if you expect users to cycle through all your slides multiple times.
When the setting is toggled to ON, if a video starts playing and part way through the module transitions to the next slide, when the video’s slide comes back around again playback will start again at the beginning:
If the option is toggled to OFF, the video will resume at whatever point it had previously played through to.
No Interaction
If this option is toggled to ON the user will not be able to interact with the video in any way, be it to pause, rewind or anything else. If the video has been set to show controls, they will be hidden:
Controls
Toggle this option to ON if you want the user to have access to video controls such as pause, play, full screen, unmute and so on:
HTML5 videos will display browser default controls, and YouTube & Vimeo videos will show their own custom controls.
Large Controls
This option is available on HTML5 videos and makes the controls larger:
Inline Mode
On mobile devices, when a video first starts playing it may automatically go into fullscreen mode. To prevent this from happening when you don’t want it to, toggle the Inline Mode option to ON:
Doing so adds the playsinline
attribute to the video, allowing it to start playing inline in the module where you positioned it.
Mute at Start
When toggled to ON this option will mute the video each time its slide comes around:
This is helpful to avoid inadvertently disrupting a user. For example, they may have previously activated sound on the video, watched it, but then moved on to view another part of the site while the module kept cycling slides. You would not want to interrupt their interaction with the site by having unwanted sound distracting their attention.
Volume
This option allows you to specify the default volume for audio, once unmuted. The value should be between 0
and 100
, where 0
represents no sound and 100
represents full volume:
Video Speed
This option is available for YouTube videos and allows you to make playback run faster or slower than normal. The settings to choose from are: “1/4”, “1/2”, “Normal”, “x1.5” and “x2”:
Start Time
Instead of starting playback at the beginning you can set a custom start time via this option:
The format should be in <minutes>:<seconds>
format, e.g. 1:30
.
End Time
In the same way as you can set a custom start time, described above, use this option to set a custom end time at which playback will stop or loop:
Arguments
Arguments are little snippets of text that get added to the end of a YouTube or Vimeo video URL.
These arguments allow you to send information and settings requests to the video hosting server so it can give you back the video you want with specific features enabled or disabled:
We previously covered one of the ways you can leverage arguments, that being to prevent cross site origin issues. Other examples of utilizing arguments might be to disable / enable fullscreen, set the language used on the player, or show / hide an author name byline.
Arguments should all be connected into one single string of text and characters with no spaces.
The format to use to configure a specific setting with a value is: <setting>=<value>
And each setting / value pair should be separated by an: &
If at any time you want to clear custom arguments and revert back to the default, click the Reset button below the Arguments field.
For a full list of available arguments check out the following resources:
HTML Tag
In the case of video layers there is generally no need to change this setting from the default. This setting is more relevant to SEO for text layers.
Convert to Image
Video and Image layers have a lot in common, so in the Convert Layer Type sub-section you’ll find a button that lets you convert your video layer into a image layer, retaining many of its current settings:
Up Next: Audio Layers
In the next guide we’ll round out our learning about audio visual content by stepping through all the details of Adding and Configuring Audio Layers.