Overview

The Video extension assigns HTML, YouTube and/or Vimeo videos to slides, and controls play/pause when the slider moves.

  • Sample Video 01
  • Sample Video 02
  • Sample Video 03
  • Sample Video 04

Installation

NPM

Get the latest version by NPM:

$ npm install @splidejs/splide-extension-video

Link to the CSS:

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

Add the extension to the Splide:

import { Splide } from '@splidejs/splide';
import { Video } from '@splidejs/splide-extension-video';
new Splide( '.splide' ).mount( { Video } );
JavaScript

CDN or Hosting Files

Visit jsDelivr and get the links of the latest files, or download files from the dist directory. And then, import minified CSS and JavaScript files on your site:

<link rel="stylesheet" href="path-to-the-css/splide-extension-video.min.css">
<script src="path-to-the-script/splide-extension-video.min.js"></script>
HTML

After importing files, mount the extension to Splide:

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

Usage

To assign videos to slides, use data-splide-html-video, data-splide-youtube or data-splide-vimeo attribute. The value can be the URL or the video ID.

<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="preview01.jpg">
</li>
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU">
<img src="preview02.jpg">
</li>
<li class="splide__slide" data-splide-vimeo="https://vimeo.com/215334213">
<img src="preview03.jpg">
</li>
</ul>
</div>
</div>
HTML

Options

You can change options of the extension by passing a video object to the Splide options:

new Splide( '.splide', {
video: {
loop : true,
mute : true,
playerOptions: {
youtube: { ... },
},
}
} );
JavaScript

autoplay

autoplay: boolean = false

Enables autoplay. If true, the video of the active slide will automatically start.

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

type: boolean default: false


disableOverlayUI

disableOverlayUI: boolean = false

Disables the overlay controls such as the play button.


hideControls

hideControls: boolean = false

Requests the video player to hide the player UI. It totally depends on the provider to determine which UI can be hidden or not.

Vimeo does not allow to hide controls for free users, but allows only for PRO users.

loop

loop: boolean = false

Loops the video.


mute

mute: boolean = false

Mutes the video.

type: boolean default: false


volume

volume: number = 0.2

Sets the initial volume by 0.0 - 1.0.


playerOptions

playerOptions: { youtube?: YT.PlayerVars, vimeo?: VimeoOptions, htmlVideo?: HTMLVideoOptions }

Overwrites each player options.

youtubeYT.PlayerVars

Visit here

vimeoVimeoOptions

Visit here

htmlVideoHTMLVideoOptions

See below

Splide just forwards these options to the player object and hasn't checked what happens on each option.

{
playerOptions: {
youtube: {},
vimeo: {},
htmlVideo: {},
}
}
JavaScript

HTMLVideoOptions

You can pass following properties as htmlOptions:

  • autoplay
  • controls
  • crossOrigin
  • currentTime
  • disablePictureInPicture
  • disableRemotePlayback
  • height
  • loop
  • muted
  • playbackRate
  • playsInline
  • poster
  • preload
  • width
  • volume

Visit here and here for more details.

Each option is a property, not an attribute, which means the name must be Camel Case.

Methods

pause()

pause(): void

Pauses the playing video.

disable()

disable( disabled: boolean ): void

Disables the play button. Although this method does not hide the button, it adds the is-video-disabled class to the root element.

// Disables the button.
splide.Components.disable( true );
// Enables the button.
splide.Components.disable( false );
JavaScript

This method does not disable the HTML video, YouTube and Vimeo player UI.

Events

video:play

Fired when the 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.

playerPlayer

A Player instance.


video:pause

Fired when the video is paused.

playerPlayer

A Player instance.


video:ended

Fired when the video ends.

playerPlayer

A Player instance.

Classes

This extension adds some classes to slider elements.

ClassDescription
.is-playingAppears while the video is playing.
.splide--has-videoAdded to the root element.
.splide__slide--has-videoAdded to the slide where the video is assigned.
.splide__slide__container--has-videoAdded to the container where the video is assigned.

i18n

The play button has an aria-label with "Play Video". You can change the string by the i18n option.