Video

You're browsing the documentation for v3

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

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 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
vimeoVimeoOptions
htmlVideoHTMLVideoOptions

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.

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.

playerPlayer

video:pause

Fired when the video is paused.

playerPlayer

video:ended

Fired when the video ends.

playerPlayer

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.