Embedding videos into Layer Slider

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.

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:

• Basic tutorial
• Fixed Background
• Layer Slider into an article

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.

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.

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:

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:

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:

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!