Here you can find out how to add a video as slide background. Slide background video starts playing automatically after the slide selection and it can fill the entire slide area.
In order to set the background video you need to add a video tag as the direct child element inside the slide then specify it as slide background by adding ms-slide-bg-video class name.
<div id="masterslider" class="master-slider">
<div class="ms-slide">
<!-- img with src attribute and data-src -->
<img src="...path/to/blank.gif" data-src="..path/to/original-image.jpg" alt="">
<video class="ms-slide-bg-video">
<source src=".../path/to/video.mp4" type="video/mp4"/>
<source src=".../path/to/video.ogg" type="video/ogg"/>
</video>
</div>
<!-- ... -->
</div>
Video fit mode
Same as the slide background image, the background video supports object fit too. You can set the fit mode by data-fit attribute. Supported values are:
fill– The background 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 background video scales to maintain its aspect ratio, while fitting the slide.cover– The background video scales to maintain its aspect ratio, while filling the slide.none– The background video is not resized.scale-down– The background video scales as ifnoneorcontainwere specified, whichever would result in a smaller concrete video size size.
In addition, you can set how the video should align inside the slide area by data-object-position attribute. This attribute supports all value types of CSS object-position for more information, please check out?this article.
Parameters
Background video element supports these data attributes:
| Name | Description |
| data-muted | Background video in slider is muted by default. If you need to unmute the video, you can set this attribute to false:?data-muted="false" |
| data-loop | Background video in slider is looped. If you wish to disable the loop, you can set this attribute to false:?data-loop="false" |
| data-autopause | By setting this attribute to true, slider pauses the video when the slide changes and then resumes the video after slide is selected again. Otherwise, the background video starts from the beginning every time slider reaches the slide. |
| data-goto-next | Enabling this parameter data-goto-next="true" causes the slider changes to the next slide after the video ends. |
<div id="masterslider" class="master-slider">
<div class="ms-slide">
<!-- img with src attribute and data-src -->
<img src="...path/to/blank.gif" data-src="..path/to/original-image.jpg" alt="">
<video class="ms-slide-bg-video" data-mute="false" data-autopause="true" >
<source src=".../path/to/video.mp4" type="video/mp4"/>
<source src=".../path/to/video.ogg" type="video/ogg"/>
</video>
</div>
<!-- ... -->
</div>