{"title":"Adding an Embed Video","id":51900,"link":"https:\/\/env.averta.net\/en\/step\/adding-an-embed-video\/","parent":[51853,51826],"content":"

Beside the background video<\/a>, slides support embed videos, too. Each slide can contain one slide video that adds a play button over the slide and users can start playing the video by clicking on the button. Both embedded videos (like YouTube and Vimeo videos) and self-hosted videos are supported by Master Slider.<\/p>\n

Embed video<\/h2>\n

To add an embed video to the slide, you need to add the video URL as an anchor element with ms-slide-video<\/code> class name. The anchor element should be a direct child element of the slide.<\/p>\n

\t<div id=\"masterslider\" class=\"master-slider\">\r\n\t\t<div class=\"ms-slide\">\r\n\t\t\t<a href=\"https:\/\/www.youtube.com\/watch?v=4dRR_0GzJgU\" class=\"ms-slide-video\"><\/a>\r\n\t\t<\/div>\r\n\t\t<!-- .... -->\r\n\t<\/div><\/pre>\n
Note: <\/strong>Like the example above, you can set the link to the video page if the video is from YouTube or Vimeo. For other services you need to use the embed link address instead.<\/p>\n
Self-hosted video<\/h2>\n
To add a self-hosted video as a slide video in the markup, you can define it by HTML video element. Add it as a direct child element of the slide with ms-slide-video<\/code> class name. Then you need to specify the type of video player with data-player-type<\/code> attribute of the video element.<\/p>\n
Master Slider supports MediaElement.js<\/a> and Plyr.js<\/a> and browsers’ 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<\/code> attribute.<\/p>\n