Overview

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

It is also able to apply a video to a part of each slide.

  • Sample Video 01

    Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu.

  • Sample Video 02

    Viderer nonumes ius eu, ad habeo labore vis. Id nam nihil altera scripserit, esse commodo suscipit ei eam.

  • Sample Video 03

    Quo harum altera incorrupte ea, eos viris constituto ex. Quo harum altera incorrupte ea, eos viris constituto ex.

  • Sample Video 04

    Commodo denique honestatis duo et, an eum noluisse vituperatoribus, ad lorem nonumy tempor ius ad lorem nonumy.

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

Import CSS and modules and pass the Video extension to the mount() method:

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

If you cannot import CSS by script, use the <link> tag as usual.

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

You can apply the video to the part of the slide by inserting the container element.

<li class="splide__slide" data-splide-html-video="path or URL to the video">
<div class="splide__slide__container">
<img src="preview01.jpg">
</div>
<div>
Other contents
</div>
</li>
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.

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.


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.

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 htmlVideo:

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

Visit and for more details.

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.Video.disable( true );
// Enables the button.
splide.Components.Video.disable( false );
JavaScript

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.


video:pause

Fired when the video is paused.


video:ended

Fired when the video ends.

Classes

This extension adds some classes to some elements.

ClassDescription
.is-playingAppears in the root element 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 playVideo property of the i18n option.