Video

Overview

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

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

Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu.
Viderer nonumes ius eu, ad habeo labore vis. Id nam nihil altera scripserit, esse commodo suscipit ei eam.
Quo harum altera incorrupte ea, eos viris constituto ex. Quo harum altera incorrupte ea, eos viris constituto ex.
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

$ 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

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

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

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 } );

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

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

After importing files, mount the extension to Splide:

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

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

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

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

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

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

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

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

`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

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

`playerOptions`

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

Overrides the player-specific options.

`youtube`	`YT.PlayerVars`	Visit here
`vimeo`	`VimeoOptions`	Visit here
`htmlVideo`	`HTMLVideoOptions`	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

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

`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

// Disables the button.
splide.Components.Video.disable( true );


// Enables the button.
splide.Components.Video.disable( false );

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.

`player`	`Player`	A `Player` instance.

`video:pause`

Fired when the video is paused.

`player`	`Player`	A `Player` instance.

`video:ended`

Fired when the video ends.

`player`	`Player`	A `Player` instance.

Classes

This extension adds some classes to some elements.

Class	Description
`.is-playing`	Appears in the root element while the video is playing.
`.splide--has-video`	Added to the root element.
`.splide__slide--has-video`	Added to the slide where the video is assigned.
`.splide__slide__container--has-video`	Added 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.