Adding Video Layer

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 if none or contain 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 iframeelements.

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: