Youtube Video - Background video teaser instead of image

info's Avatar


09 Mar, 2018 04:52 PM

Hi there

I want to embed a youtube video to the first slide of my royalslider.
Instead of a static image, i would like to have a short animated teaser video - instead of the static slider image.

I tried to solve this with a simple HTML5 <video> tag - but the problem is, that either the play button and youtube video is not shown then.
If i place the <video> tag below the youtube tag, the teaser video is not shown.

I do not have very well coding experience,
could anybody help me with that please?

  1. Support Staff 1 Posted by Dmitry Semenov on 09 Mar, 2018 06:18 PM

    Dmitry Semenov's Avatar


    You'll need to disable default video feature and code this manually, as playing two videos under each other isn't a good ideal in terms of performance, here is a basic example on how to replace content of slide when user clicks on it

  2. 2 Posted by info on 09 Mar, 2018 10:57 PM

    info's Avatar

    Hi Dmitry!
    Thank you so much for the file, i successfully implemented it to the site.
    I just have one small problem in Chrome with the mp4 Video, it doesn't autoplay the video - it just shows the first frame of it.

    When i add the video on another location outside of the slider, it normally plays.

    Is there a workaround?

  3. Support Staff 3 Posted by Dmitry Semenov on 10 Mar, 2018 10:49 AM

    Dmitry Semenov's Avatar

    Try executing native video play() method after slider is initialized (after .royalSlider({ .. })).

  4. 4 Posted by info on 11 Mar, 2018 03:28 PM

    info's Avatar

    Hi Dmitry
    Sorry to ask again, but how exactly do i have to do that?

  5. Support Staff 5 Posted by Dmitry Semenov on 11 Mar, 2018 06:06 PM

    Dmitry Semenov's Avatar

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac