HTML5 Video On Revolution Slider: Build Video Sliders

In this tutorial you will see how to add videos from HTML5 Video on Revolution Slider WordPress plugin by layers and how to set it up on your responsive slider to be a back video layer full-screen style with an auto-play mode, you also will see where to mute the video.

HTML5 Video On Revolution Slider

Adding HTML5 Video With HTML5 selected in the Video Type option, find the MPEG box below: Click Media Library to upload your own video using WordPress. Alternatively, click Object Library to choose one of Slider Revolution’s included videos.

If you select a video from Slider Revolution’s Object Library, that video will be uploaded to your WordPress site.

Whether you upload your own video or choose one from the object library, the URL of your uploaded video will appear in the MPEG field:

1. Add Video Layer

Review the video tutorial

2. HTML5 Video Source: HTML5 Video Layer On Revolution Slider

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 it actually plays.

Poster Image URL

Click “Set Image” to choose a preview/poster image for the video from your WP Media Library, or enter the 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 WP Media library, but depending on the size of your video(s), they may need to be up via FTP.

A “.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

Full Screen: HTML5 Video Layer On Revolution Slider

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

ON = Video will cover the entered size of the slider (width and height will both automatically be 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 * HTML5 Video Layer On Revolution Slider

Choose which aspect ratio the video should receive a new size by. For video backgrounds, 16×9 is usually best.

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

4. HTML5 Video Settings

Loop Video

Disable:

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

Loop – Slide is on pause: HTML5 Video Layer On Revolution Slider

Video will loop endlessly, and the slide will never change unless the slider’s navigation is up (next button clicks, etc.).

Loop – Slide does not stop:

Video will loop endlessly until the slide’s delay appears. For example, if your slides 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.

• Firstly, choose On 1st Time to autoplay only the first time the slide is shown.
• Alternatively. 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.

Allow FullScreen

If chosen and controls are not out of layout, the controls will include a Full-Screen button.

Next Slide on End: HTML5 Video Layer On Revolution Slider

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

OFF: If the video’s length is less than the slide’s delay. So, 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: HTML5 Video Layer On Revolution Slider

Show the video’s preview image (see Source section) whenever the video is paused.

Video Preload

The preloading behavior for the video.

If the video is meant to autoplay as soon as it’s shown, choose “Auto”. In addition, If autoplay is disabled, choose “Disable” or “Meta”.

5. HTML5 Video Visibility

Disable Mobile

Choose to disable the video for mobile devices. So, the video layer will simply not appear.

Only Preview on Mobile

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

In conclusion, all the Visualmodo WordPress themes come with the Revolution Slider premium WordPress plugin for free while our themes usage.