Embedding videos to Layer Slider

6 comment(s)

As the next part of the Layer Slider tutorials after the Parallax demo now we will show you how to embed your videos from a video channel, like Youtube or Vimeo or even a self-hosted one from a custom source. It is possible to embed every types into your layers, let's see how to make it:

Relevant Settings in LS

If you ever checked the slider settings, you should saw that there is a Videos tab there. With Automatically play videos you can set to play videos when the slide is active. Moreover, you can set that your slider pause in case of autoplay, when the movie is playing. The third option is only relevant in case of youtube videos. You can define the quality if the thumbnail (poster) image. It appears, when the video stopped. Important to know, that if you set too high value it can happen, that the selected video doesn't have that kind of thumbnail (no HD mode available). In this case the thumbnail won't appear.

Layer Slider Video Settings
Layer Slider Video Settings

How to start?

First of all create a new slider in the Layer Slider editor, or click an existing one for edit. Here select or create a layer where you would like to paste the video. If you get one, click on the HTML/ Video / Audio button under the Content tab. Please note that if you are not familiar with the UI of the Layer Slider you can watch our tutorial videos on the following links:

HTML/ Video/ Audio

Youtube

Youtube is one of the most popular video sharing pages over the internet, so you usually faced that you need to insert a video on your website.

If you navigated to the proper area of the LS, now you need to select the video on Youtube. Under the video, click on the Share button, and then the embed button. Here you will see the embed code within an iframe tag. Under the code you can set additional settings, like related videos, size, and so on. If you finished with those ones, copy the code, and navigate back to the selected layer in the Layer Slider edit page. Then nothing else to do, just place the embed code into the textarea. After that the youtube video placed into your layer. Don't forget to save the slider.

Youtube embedding
Youtube embedding

Vimeo

Vimeo was founded by a group of filmmakers but nowadays it became a world-wide video sharing portal within millions of people make growing bigger every day. The second part with the insertion to the selected layer is similar than in case of youtube, only getting the embed code different. So open your vimeo video, then click on the airplane-icon (sharing button) on the top right corner. A popup will open, and on the bottom you can see the embed code. In this case you can set optional settings as well. If you have done with them, copy the code, and insert it into the selected layer with the mentioned technic.

Vimeo embed
Vimeo embedding

Self-hosted videos

As we mentioned at the beginning, you can place your own videos into the Layer Slider. It is possible by the HTML5 Video tag. There are 3 file types possible to make it:

  • MP4
  • WebM
  • OGG
From these 3 types, only the MP4 has wide-range support among the browsers. Here is the complete list from W3:

Video compatibility table
Video compatibility table

Let's see the short example code by W3:

With this code we only embed a video in 2 formats, and also placed a notification text for the older browsers, which are not able to show this video. As you can see a special attribute is placed in the opening video tag as well, the controls. With this custom parameter not only the video will appear but a control bar as well to able to stop, replay the movie. There are more custom attributes for this tag, see below:

Video tag attributes
Video tag attributes

Self-hosted audio files

Of course that HTML5 standard is not only able to embed videos directly into the source code, but audio files as well. This is possible by the audio tag. It is working similar like described the previous above, however it has less aditional attributes. Check the embedding code and browser compatibility list below:

Audio compatibility table
Audio compatibility table

All the sources, attribute list, and compatibility table comes from the W3 pages: Video tag and Audio tag.

Small summary

This post is quite long, but hope that we mentioned every important details of this topic. Use those workarounds as much as you would like, and stay tuned for the next useful tutorial-like blog post!

Related Post

How to use the parallax effect with the Layer Slider

If you ever checked the Layer Slider demo page, you could see that this is a really multi-purpose slider extension for Joomla, within many built-in features, animations, and other effects. Now we ...

More

Advanced usage of Layer Slider

If you follow our blog section in the last period, you can see that the recent articles concern to Layer Slider. Those are some tutorials for the existing users, and so-called detailed description ...

More

Comments

alix benjamin
Thursday, 18 February 2016

Hi , very usefull doc, but i can't figure out in which folder my movie.mp4 should be placed in my server .

thx for your help

Offlajn
Thursday, 18 February 2016

Hello,

It is recommended to upload your mp4 video file into the images or even media directory. The point is, that you also need to add the correct path for the video in the Layer Slider, so you'd better use full urls, like http://yoursite.com/images/yourvideo.mp4

Hope this helps.

Guest
Previsha
Thursday, 09 June 2016

Thanks for this. It was very usefull.

Guest
Carolyn
Friday, 30 September 2016

Hi - Thank you so much for posting these VERY HELPFUL instructions on how to create a "video" layer slider. I could not find this information on the Themefusion Avada site (layer slider was a plugin when you buy Avada theme), or anywhere else. Your tutorial was a lifesaver. I used it on this page (the entire site is still "under construction"): http://libforall.org/wp/mustofa-bisri/ Do you have any idea why the thumbnails are NOT appearing in the first video layer slider on the page but are appearing in the second one? The two sliders have the EXACT SAME settings for both sliders. Again, thanks for posting this great tutorial.

Offlajn
Tuesday, 04 October 2016

Hi Carolyn,

Thank you for your kind words. Maybe you should set the Youtube preview option to a lower value in the Slider Settings/Videos tab.

Hope this will help!

Guest
Mobilunity
Tuesday, 04 October 2016

Great practical advice!

Leave your comment

Guest
Guest
Sunday, 22 October 2017
(required)
(required)
(required)

Find Us on Facebook