Overview

The Video extension assigns HTML, YouTube and/or Vimeo videos to slides, and controls play/pause when the carousel 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

The YouTube video URL must include a v= query parameter. Neither embed URLs nor shorten URLs are acceptable.

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 for this 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.


host

host: string

Changes the host option for YouTube (^0.8.0). For example, you can enable Privacy Enhanced Mode like:

new Splide( '.splide', {
video: {
host: 'https://www.youtube-nocookie.com',
},
} );
JavaScript

playerOptions

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

Overrides the player-specific 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 htmlVideo:

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