YouTube layer
In this article
You can find the YouTube layer in the Slide Editor.
💡 Tip: Youtube's code only allows a video to be started after all Youtube videos on your website finished loading. Because of this, to have an optimized result, we don't suggest inserting more than 12 Youtube videos into a single page!
You can use this layer to place a YouTube video to your slide.
Content
General
YouTube URL or Video ID
The link to your YouTube video.
Cover image
Smart Slider 3 will automatically create a cover image from the link you gave to it, but if you want your image of choice to appear, you can also upload an image to cover your Youtube video, and if you click on it, it will disappear, and the video will start to play.
Aspect Ratio
You can select the aspect ratio of your video for better responsive behavior. This is especially useful when you're working in Default editing mode.
- 16:9 The video will be displayed with 16:9 aspect ratio
- 16:10 The video will be displayed with 16:10 aspect ratio
- 4:3 The video will be displayed with 4:3 aspect ratio
- Custom: 3.4.1.8 You can set a custom aspect ratio for your video to ensure it displays correctly.
Fill layer height: The video will fill the height of the layer:
Video Settings
Autoplay
If you turn this on, your video will start playing when you go to its slide, and it will stop when you go to another.
⚠️ Warning: Browsers have severe restrictions against autoplaying videos. Learn the details.
When Ended
- Do nothing: No action will be done after the video finishes.
- Go to next slide: The slider will switch to the next slide when the video finishes.
⚠️ Warning: This option is only visible when the Loop is disabled!
Start Time
The time in seconds where the video starts from.
End Time
The time in seconds where the video ends.
Volume
The volume of your video.
⚠️ Warning: YouTube now checks whether the current user muted the videos in their last session on YouTube and might adjust the sound accordingly. If the user muted the video on YouTube, YouTube will automatically serve the video without sound and you can't override that.
Pause on Scroll
You can set the video's behavior on scroll.
- Never The video will not be paused regardless of the slider's visibility
- When partly visible The video will be paused when at least 1px of it is not visible. Scrolling back to the video will continue the play.
- When not visible The video will be paused when none of it is visible. Scrolling back to the video will continue the play.
Loop
With this option you can make your video start over when it's done.
Restart on Slide Change
If it's turned off, and you switch away from your video, it will only pause, but if you turn this on, it will reset the video to 0 sec.
Display
Controls
You can hide the controls and the video time bar from the bottom of the video if you turn off this option.
Hide YouTube logo - Pro
You can disable the YouTube logo from the player. The logo will still show up when the video is paused or when the mouse is over it.
Centered
If your layer has a different ratio, than your video, then it will be smaller to fit the whole video into its space. However, if you turn this option on, it will scale the video up so that it will cover the whole layer, and the video will be centered. The controls and the video title will be hidden.
Show related videos
⚠️ Warning: As of September 25th, 2018 you can't remove related videos from embedded videos.
- Same channel: YouTube will show related videos that are from the same channel as the video that was just played.
- Anywhere: YouTube will show related videos from any channel.
Play Button - Pro
Play button
If you turn this on, you will have a play button over your cover image.
Width
The width of the play button.
Height
The height of the play button.
Image
You can upload your custom play button image.
Style
Learn about the style options at the Layer Style documentation.
Animations
Learn about the animations at the Animation documentation.
Frequently Asked Questions
Why doesn't the video autoplay work?
Browsers made lots of limitations about autoplaying videos. Learn the details in the dedicated article.
How to use the YouTube layer as a background video?
Smart Slider only supports using MP4 videos as the background of a slide, but using this trick you can make it look like the YouTube video is in the background.
Step 1
Add a new YouTube layer in Absolute position.
Step 2
On the YouTube layer's Style tab settings make sure, that it is in its default center alignment and have the Left and Top value on 0px. This will assure your layer is completely centered.
Write 100% into the Width and Height values. This will make your layer as big as the slide is.
Step 3
On the Content tab settings, at the Aspect ratio choose Fill layer height . This will make your YouTube video's size to be equal to the purple bordered area.
Turn on Autoplay, Mute your video at Volume and enable the Loop too. This will make your video automatically play and be repeated. But you should note, that in a lot of cases your video still cannot autoplay, because of browser limitations!
Turn on Centered. This will scale up your video's size, to cover the entire layer area, while it leaves out the controls. Please note that YouTube might still display some branding stuff on the video and don't provide option to remove them.
Step 4
At your slider's settings → Size tab, make sure the Limit slide width option is turned off. This option limits down how far your layers can go sideways, and as you want your YouTube layer to cover the slide, you cannot limit down how far it can go.
And that's it.
Can YouTube count the video views in Smart Slider?
The short answer is yes, but it's more complicated. We're using the embedded videos, which YouTube can count views on. However, there are cases when YouTube does not count the embedded video views. Some of the most common cases:
- The video autoplays. YouTube only counts the video views if they can be sure that the person viewing the website starts the video. For this reason autoplaying videos are not counted.
- The native play button was not clicked to start the video. In the YouTube iFrame API documentation YouTube notes that the playback only counts toward a video's official view count if it is initiated via a native play button in the player. This native play button is only visible, if you don't use the Cover image.
Why do I see a JavaScript error message while using Youtube layer?
While you are using the Youtube layer, you could see a JavaScript error message similar to this appearing in your Console:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://example.com').
This happens for many years now due to a well known bug in Youtube's IFrame Player API, that they are trying to optimize the loading of their codes, which creates issues in the code's loading order and that makes this error message appear. Youtube API developers don't care enough about this issue to fix it, as postMessage errors don't cause any issues, they are just written out and nothing bad happens due to them. So you should just ignore this message.
Can I choose the quality of the video?
No, Youtube does not allows this. Your video's quality will be chosen by Youtube, based on the size of your Youtube layer. (This quality is often smaller from what people would actually want.)