Video layer makes it possible to play embed, self-hosted, and loop videos as a layer over the slider. It also supports custom cover image over the video. This article describes how to create each of the supported video layer types.
Same as other layers, video layer defines by ms-layer
class name and data-type="video"
attribute.
Embedded video
Embedded videos refer to the videos from video streaming services like YouTube and Vimeo. Master Slider supports embedding video from any video streaming service that offers iFrame embed method. But Master Slider supports YouTube and Vimeo APIs as well, so you will have more control on embedded videos from these services.
<div id="masterslider" class="master-slider"> <div class="ms-slide"> <!-- .... --> <div class="ms-layer" data-type="video"> <!-- youtube video embed code --> <iframe src="https://www.youtube.com/embed/4dRR_0GzJgU?ecver=2" allowfullscreen></iframe> <!-- optional - cover image --> <img src=".../path/to/blank.gif" data-src=".../path/to/cover.jpg" alt=""> </div> <!-- .... --> </div> <!-- .... --> </div>
The example adds a YouTube video as a layer over the slide. It also sets a custom cover image. The cover image is set for preloading as it has data-src
attribute and path to a blank image.
Note: It is recommended to clean the generated embed code by the video streaming services, like the example, you only need to add the iframe
element inside the layer without any style or width and height attributes. You can find more information about generating the?video embed codes in this article.
Self-hosted video
To create a video layer containing a self-hosted video, you need to define the video source by video
element. Master Slider supports MediaElement.js and Plyr.js and the browser’s native players to play self-hosted videos. To set the player type for each of the supported video players, you can use the following values for data-player-type
attribute:
mejs
– Specifies MediaElement.js video player.plyr
– Specifies Plyr.js video player.native
– Determines the browser’s native video player. This type is not recommended since the native video player is not available in all browsers.
The following example shows how to add the self-hosted video:
<div id="masterslider" class="master-slider"> <div class="ms-slide"> <!-- .... --> <div class="ms-layer" data-type="video"> <video controls data-player-type="plyr"> <source src=".../path/to/video.mp4" type="video/mp4"/> <source src=".../path/to/video.ogg" type="video/ogg"/> </video> <!-- optional - cover image --> <img src=".../path/to/blank.gif" data-src=".../path/to/cover.jpg" alt=""> </div> <!-- .... --> </div> <!-- .... --> </div>
Looped video
To create a video layer containing a looped video, you need to add a self-hosted video inside the layer without specifying the video player type. It is also recommended to add muted
attribute. Muted videos are able to play inline in mobile devices too.
<div id="masterslider" class="master-slider"> <div class="ms-slide"> <!-- .... --> <div class="ms-layer" data-type="video" data-autoplay="true" > <video controls loop muted> <source src=".../path/to/video.mp4" type="video/mp4"/> <source src=".../path/to/video.ogg" type="video/ogg"/> </video> </div> <!-- .... --> </div> <!-- .... --> </div>
Important: It is important to enable the auto play option data-autoplay="true"
. Otherwise, the video does not start playing.
You can change the video fit mode data-fit
and data-object-position
attributes.
<div id="masterslider" class="master-slider"> <div class="ms-slide"> <!-- .... --> <div class="ms-layer" data-type="video" data-autoplay="true" > <video controls loop muted data-fit="contain"> <source src=".../path/to/video.mp4" type="video/mp4"/> <source src=".../path/to/video.ogg" type="video/ogg"/> </video> </div> <!-- .... --> </div> <!-- .... --> </div>
data-fit attribute
It specifies how should?the video be resized to fit the slide. Possible values are:
fill
– The video will completely fill the slide. If its aspect ratio does not match the aspect ratio of the slide, then it will be stretched to fit.contain
– The video scales to maintain its aspect ratio, while fitting the slide.cover
– The video scales to maintain its aspect ratio, while filling the slide.none
– The video is not resized.scale-down
– The video scales as ifnone
orcontain
were specified, whichever would result in a smaller concrete image size.
data-object-position attribute
It determines the alignment of video inside the slide. It supports CSS css-position
values. For more information check out?css object position.
Layer attributes
Below data attributes let you control video layer when to start or stop playing. These attributes are expected to be added to the layer element, not to the video
or iframe
elements.
data-autoplay
– Enables autoplaying video (data-autoplay="true"
).data-autopause
– Pauses the video after slide changes, and resumes the video after selecting the slide again (data-autopause="true"
).data-wait-for-anim
– Disabling it when the autoplay is enabled, autoplays the video before the layer animation ends (data-wait-for-anim="false"
).
This article only describes how to create the layer. If you need more information about layers, check out the following articles: