Slider Revolution Magento 2.x Extension Documentation

Video Layers

1. Add Video Layer

back to menu

2. YouTube Source

back to menu

Enter the YouTube ID or full URL, then click the “Search” button.

3. YouTube Sizing

back to menu
Full Screen

OFF = YouTube’s video iframe will be whatever width and height you choose (see Layer Styles).

ON = YouTube’s video iframe will cover the enter 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 be cropped, 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 set to “On”.

Aspect Ratio *

YouTube offers 2 versions of the video that can be loaded which are 16×9 or 4×3. For video backgrounds, 16×9 is usually best.

* only applicable if “Force Cover” is set to “On”

4. YouTube Settings

back to menu
Loop Video

Disable:

Video will only play once each time the video is initially played.

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 in the slide at the same time, choose this option to make sure only one video can be played at a time.

Allow FullScreen

If chosen and controls are not hidden, the controls will include a Full Screen button.

Next Slide on End

ON: Slide will immediately change as soon as the video ends.

OFF: If 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

Choose to hide the video’s default player controls.

Mute Video

Choose to mute the video’s volume if it normally has sound.

Volume (0-100)

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.

Video Speed

A special option to play the video at a “fast forward” speed.

5. YouTube Visibility

back to menu
  • Quick Tip
    For optimal performance, always use a preview image! This way the video will only load from YouTube.com when the video actually plays.
Preview Image

Enter a custom url, or click the “Image Library” button to choose an image from the Magento Media library.

Or choose “Video Thumbnail”, which will then automatically load the video’s preview image from YouTube.com.

Disable Mobile

Choose to disable the video for mobile devices (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 (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.
  1. Download the play button from YouTube.com, or create your own.
  2. If downloaded from YouTube, resize the button to 75x53 in Photoshop.
  3. Upload the button graphic to your site, and make note of its url location.
  4. Add the following CSS to the slider's Custom CSS section.

6. YouTube Arguments

back to menu

“Arguments” are additional parameters that can be passed to the video from this list.

Not all params are supported, but useful options from the list are “rel”, “iv_load_policy”, and “modestbranding” (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:

would become this:

1. Add Video Layer

back to menu

2. Vimeo Source

back to menu

Enter the Vimeo ID or full URL, then click the “Search” button.

3. Vimeo Sizing

back to menu
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 enter 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 be cropped, 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 set to “On”.

Aspect Ratio *

Vimeo offers 2 versions of the video that can be loaded which are 16×9 or 4×3. For video backgrounds, 16×9 is usually best.

* only applicable if “Force Cover” is set to “On”

4. Vimeo Settings

back to menu
Loop Video

Disable:

Video will only play once each time the video is initially played.

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 in the slide at the same time, choose this option to make sure only one video can be played at a time.
Next Slide on End
ON: Slide will immediately change as soon as the video ends.
OFF: If 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)

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

back to menu
  • Quick Tip
    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 Magento 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 (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 (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.
  1. Download this PSD and extract its play button graphic, or create your own.
  2. Resize the play button to 76x43 in Photoshop.
  3. Upload the button graphic to your site, and make note of its url location.
  4. Add the following CSS to the slider's Custom CSS section.

6. Vimeo Arguments

back to menu

Additional parameters that 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:

would become this:

1. Add Video Layer

back to menu

2. HTML5 Video Source

back to menu
  • Quick Tip
    For optimal performance, use a poster/preview image in addition to "Video Preload -> Disable" (see settings here). This way the video will only load when the it actually plays.
Poster Image URL

Click “Set Image” to choose a preview/poster image for the video from your Magento Media library, or enter url to the image directly.

MP4, WEBM & OGV Url

Upload your video files to your website via ftp, and then enter their url locations here.

You could also use the “Set Video” option to choose or upload a video from your Magento Media library, but depending on the size of your video(s), they may need to be uploaded via ftp.

An “.mp4” version of your video is mandatory, and will work almost everywhere except Firefox on Macs. Because of this, it’s also important to include an alternative version of the video, which can be either “WEBM” or “OGV”. Firefox on Mac supports both of these, so you only need one or the other.

Here’s a free tool you can use to create “ogv” and “webm” versions of your video.

3. HTML5 Video Sizing

back to menu
Full Screen

OFF = Video size will be whatever width and height you choose (see Layer Styles).

ON = Video will cover the enter 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 be cropped, 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 set to “On”.

Aspect Ratio *

Choose which aspect ratio the video should be resized by. For video backgrounds, 16×9 is usually best.

* only applicable if “Force Cover” is set to “On”

4. HTML5 Video Settings

back to menu
Loop Video

Disable:

Video will only play once each time the video is initially played.

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 in the slide at the same time, choose this option to make sure only one video can be played at a time.

Allow FullScreen

If chosen and controls are not hidden, the controls will include a Full Screen button.

Next Slide on End

ON: Slide will immediately change as soon as the video ends.

OFF: If 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

Choose to hide the video’s default player controls.

Mute Video

Choose to mute the video’s volume if it normally has sound.

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 Source section) whenever the video is paused.

Video Preload

The preloading behaviour for the video.

If the video is meant to autoplay as soon as its shown, choose “Auto”.

If autoplay is disabled, choose “Disable” or “Meta”.

5. HTML5 Video Visibility

back to menu
Disable Mobile

Choose to disable the video for mobile devices (video layer will simply not be shown).

Only Preview on Mobile

When enabled, only the video’s preview/poster image will be shown on mobile devices (video will never be loaded).