Fancyapps

Video ​

This plugin provides an easy way to embed HTML5, YouTube, and Vimeo videos into Carousel slides.

Basic example ​

js
const options = {
  style: {
    "--f-carousel-slide-height": "400px",
    "--f-arrow-pos": "10px",
    "--f-arrow-bg": "#fff",
    "--f-arrow-color": "#777",
    "--f-arrow-width": "40px",
    "--f-arrow-height": "40px",
    "--f-arrow-shadow": "rgba(0, 0, 0, 0.3) 0px 1px 4px -1px",
    "--f-arrow-svg-stroke-width": "2.5px",
  },
  slides: [
    {
      src: "https://www.youtube.com/watch?v=4FUnXaq_VWk",
      caption: "YouTube video",
    },
    {
      src: "https://vimeo.com/259411563",
      caption: "Vimeo video",
    },
    {
      src: "/sample.mp4",
      caption: "HTML5 video",
    },
  ],
};

Usage ​

Include corresponding JS and CSS files:

js
import { Video } from "@fancyapps/ui/dist/carousel/carousel.video.js";
import "@fancyapps/ui/dist/carousel/carousel.video.css";

Pass Video to Carousel constructor or use plugins option.

js
const container = document.getElementById("myCarousel");
const options = {
  // Your custom options
};

Carousel(container, options, { Video }).init();

Options ​

autoplay ​

If videos should start playing automatically after they are displayed

Type

boolean

Default

false

html5videoFormat ​

Optional custom HTML5 video format

Type

string

Default

undefined

html5videoTpl ​

Optional custom HTML5 video format

Type

string

Default

`<video class="f-html5video" playsinline controls controlsList="nodownload" poster="{{poster}}">
    <source src="{{src}}" type="{{format}}" />Sorry, your browser doesn't support embedded videos.</video>`

iframeAttr ​

Attributes of an iframe element

Type

Record<string, string>

Default

js
{
  allow: "autoplay; fullscreen",
  scrolling: "auto",
  credentialless: "",
}

vimeo ​

Vimeo embedded player parameters; see https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Player-parameters-overview

Type

js
{
  byline: 0 | 1;
  color: string;
  controls: 0 | 1;
  dnt: 0 | 1;
  muted: 0 | 1;
}

Default

js
{
  byline: 1,
  color: "00adef",
  controls: 1,
  dnt: 1,
  muted: 0,
}

youtube ​

YouTube embedded player parameters; see https://developers.google.com/youtube/player_parameters#Parameters

Type

js
{
  controls?: 0 | 1;
  enablejsapi?: 0 | 1;
  nocookie?: 0 | 1;
  rel?: 0 | 1;
  fs?: 0 | 1;
}

Default

js
{
  controls: 1,
  enablejsapi: 1,
  nocookie: 1,
  rel: 0,
  fs: 1,
}