In this article
You can find the YouTube layer in the Slide Editor.
💡 Tip: Check our article, and read more about how you can create a YouTube slider.
You can use this layer to place a YouTube video to your slide.
YouTube URL or Video ID
The link to your YouTube video.
https://www.youtube.com/watch?v=kind of links as the
https://youtu.be/kind of links don't always work properly.
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.
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: 18.104.22.168 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:
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.
- 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.
The time in seconds where the video starts from.
The time in seconds where the video ends.
The volume of your video.
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.
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.
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.
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
- 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
If you turn this on, you will have a play button over your cover image.
The width of the play button.
The height of the play button.
You can upload your custom play button image.
Learn about the responsive options at the Layer Style documentation.
Learn more about the effect options at the Layer Style documentation.
Learn about the position options at the Layer Style documentation.
Learn about the size options at the Layer Style documentation.
Learn more about the advanced options at the Layer Style documentation.
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.
Add a new YouTube layer in Absolute position.
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.
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, probably 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.
At your slider's settings → Size tab, make sure the
Limit slide widthoption 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, your YouTube layer will cover the slide, just like a background video!
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.
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.