YouTube On Revolution Slider: Build Video Layers Sliders

In this tutorial, you will see how to add videos layers from Youtube on the Revolution Slider WordPress plugin to set it up on your slider

By Claudio Pires
Updated on July 25, 2022
YouTube On Revolution Slider: Build Video Layers Sliders

In this tutorial you will see how to add videos from Youtube on the Revolution Slider WordPress plugin 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.

YouTube On Revolution Slider

To add a new video layer Go to the ‘Add Layer’ button on the top toolbar and click the ‘Video’ button: Video ID To display a YouTube or Vimeo video in the video layer, select ‘YouTube Video’ or ‘Vimeo Video’ ‘ in the video type options.

Revolution Slider WordPress Plugin Video Layer

You’ll need to find the ID of the video in question, then copy and paste that ID into the layer’s Video ID field. The Video ID field is on the Layer Options tab of the video layer, in the Content subsection under the Media Content panel: Find the YouTube ID In the video’s URL, search for the string of letters and numbers: watch?v=

Video Layer Editor Section Enter ID

This is the YouTube ID, it should look like this: vv2hC07aGvE Find the Vimeo ID Go to the web page of the video you want to use and copy the numbers that follow the end of the video URL/these numbers are the Vimeo IDs that should look like this: 1236067. So you can add YouTube or Vimeo on Revolution Slider Video layers.

1. Add Video Layer

Youtube On Revolution Slider: Build Video Sliders

2. YouTube Source To Design Video Layers With Slider Revolution

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

Youtube On Revolution Slider: Build Video Sliders

3. YouTube Sizing

YouTube Sizing
Sizing – Youtube On Revolution Slider

Full Screen

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

ON = YouTube’s video iframe will cover the present 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 by adding youtube to the revolution slider.

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 *

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

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

4. YouTube Settings To Design Video Layers With Slider Revolution

Loop Video

Disable:

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

Loop – Slide is our pause:

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

Loop – Slide does not stop:

Video will loop endlessly until the slide’s delay is appearing. For example, if your slides are normally up to appear 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 for your youtube video on the revolution slider.

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 hidden. So, the controls will include a Full-Screen button for Youtube in Revolution Slider.

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

Choose to hide the video’s default player controls.

Mute Video

Choose to mute the video’s volume if it normally has sound for your Youtube in Revolution slider.

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.

Video Speed
Video settings – Youtube On Revolution Slider

5. YouTube Visibility

YouTube Visibility
Visibility – Youtube On Revolution Slider
  • 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 the youtube revolution slider.

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 YouTube.com.

Disable Mobile

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

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.
  1. Firstly, download the play button from YouTube.com, or create your own.
  2. Secondly, if downloaded from YouTube, resize the button to 75×53 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 for edit the youtube layer in revolution slider.

.tp-caption .tp-videoposter:after {

    background-image: url(http://site.com/wp-content/uploads/2015/07/youtube.png);

    background-position: center center;

    background-repeat: no-repeat;

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -26px 0 0 -37px;

    content: “”;

    width: 75px;

    height: 53px;

}

6. YouTube Arguments

“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:

hd=1&wmode=opaque&showinfo=0&ref=0;

would become this:

rel=0&hd=1&wmode=opaque&showinfo=0&ref=0;

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

Claudio Pires

Claudio Pires is the co-founder of Visualmodo, a renowned company in web development and design. With over 15 years of experience, Claudio has honed his skills in content creation, web development support, and senior web designer. A trilingual expert fluent in English, Portuguese, and Spanish, he brings a global perspective to his work. Beyond his professional endeavors, Claudio is an active YouTuber, sharing his insights and expertise with a broader audience. Based in Brazil, Claudio continues to push the boundaries of web design and digital content, making him a pivotal figure in the industry.