By adding splide-extension-video to Splide, you can assign HTML video, YouTube or Vimeo videos to slides.

Demo

Click to Play

A play button will appear on a slide where a video is assigned.

Autoplay

Videos are played automatically after a slider is initialized or it moves.

Installation

NPM(Recommended)

Get the latest extension by NPM:

$ npm install @splidejs/splide-extension-video

Link to the stylesheet:

<link rel="stylesheet" href="node_modules/@splidejs/splide-extension-video/dist/css/splide-extension-video.min.css">

Mount the extension to the Splide:

import Splide from '@splidejs/splide';
import Video from '@splidejs/splide-extension-video';

new Splide( '#splide' ).mount( { Video } );

CDN or Hosting Files

Visit jsDelivr and get the links of the latest files or download files from the dist drectory. Then import minified stylesheet and JavaScript files on your site:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.0.2/dist/css/splide-extension-video.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.0.2/dist/js/splide-extension-video.min.js">

Note that version numbers above are incorrect. Please use the latest version.

After including files, mount the extension to the Splide:

new Splide( '#splide' ).mount( window.splide.Extensions );

Extensions are stored in the splide global object. Be aware of conflict against your local variables when omitting window.

Inserting Data Attribute

To assign a video to a slide, add a data-splide-html-video, data-splide-youtube or data-splide-vimeo attribute to a slide element. The value must be a video URL:

<div class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide" data-splide-html-video="path or URL to the video">
				<img src="thumbnail01.jpg">
			</li>
			<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU">
				<img src="thumbnail02.jpg">
			</li>
			<li class="splide__slide" data-splide-vimeo="https://vimeo.com/215334213">
				<img src="thumbnail03.jpg">
			</li>
		</ul>
	</div>
</div>

Options

Pass video object to options to change defaults like this:

new Splide( '#splide', {
	video: {
		autoplay: true,
		mute    : true,
	},
} );

autoplay

Whether to play the video automatically. This option is ignored when the Grid extension is active.

Autoplay doesn’t work for HTML video without mute option in some browsers because of their policy.

type: boolean default: false


disableOverlayUI

If true, the overlay UI including a play button is not rendered.

type: boolean default: false


hideControls

Hide the video control UI.

type: boolean default: false


disableFullScreen

Hide full screen button(Only for YouTube).

type: boolean default: false


loop

Loop a video.

type: boolean default: false


mute

Mute a video.

type: boolean default: false


volume

Change volume(0.0-1.0).

type: numberdefault: 0.2

Events

This extension emits some events that are useful for you to know status of a video.

video:play

Fired when a video starts. Note that this is not always triggered right after the play button is clicked because there can not be enough buffer to start the video.

Parameters

  • {Player} player: A Player class instance.

video:pause

Fired when a video is paused.

Parameters

  • {Player} player: A Player class instance.

video:ended

Fired when a video is ended.

Parameters

  • {Player} player: A Player class instance.

Classes

Some classes are added by this extension.

is-playing

Inserted to a root element while video is playing and removed when it is paused or ended.


splide--has-video

Inserted to a root element.


splide__slide--has-video

Inserted to a slide element where a video is assigned.


splide__slide__container--has-video

Inserted to a slide container element whose parent slide has a video.

Links

User's Guide
Tutorials
Extensions
Integration