Videos

The Carousel Video plugin is used under the hood to provide an easy way to embed HTML5, YouTube, and Vimeo videos.

Basic usage

Declarative

Create your elements following the usage instructions.

An example of an HTML5 video with custom dimensions:

<a href="/sample.mp4" data-fancybox data-width="640" data-height="360">
  <img src="/poster.jpg" alt="Video poster" width="240" height="180" />
</a>

JS Bin Example

Full-size YouTube video:

<a
  href="https://www.youtube.com/watch?v=PUdyuKaGQd4"
  data-fancybox
  data-width="100%"
  data-height="100%"
>
  <img
    src="http://i3.ytimg.com/vi/PUdyuKaGQd4/hqdefault.jpg"
    alt="Video poster"
    width="240"
    height="180"
  />
</a>

JS Bin Example

Vimeo video with custom aspect ratio:

<a href="https://vimeo.com/191947042" data-fancybox data-aspect-ratio="2 / 1">
  <img
    src="https://i.vimeocdn.com/video/604514162-856dfce17c1b211a166242452bd54deb1e27d29ba092a09a9d17e58a511d0fd6-d_640?region=us"
    alt="Video poster"
    width="360"
    height="180"
  />
</a>

JS Bin Example

Example of customization by passing options to the Video plugin:

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Video: {
      autoplay: false,
    },
  },
});

JS Bin Example

Programmatic

Example of displaying a single video:

Fancybox.show([
  {
    src: "https://www.youtube.com/watch?v=z2X2HaTvkl8",
    width: 640,
    height: 360,
  },
]);

JS Bin Example

Video gallery with thumbnails:

Fancybox.show([
  {
    src: "https://www.youtube.com/watch?v=z2X2HaTvkl8",
    thumbSrc: "http://i3.ytimg.com/vi/z2X2HaTvkl8/hqdefault.jpg",
  },
  {
    src: "https://www.youtube.com/watch?v=dZRqB0JLizw",
    thumbSrc: "http://i3.ytimg.com/vi/dZRqB0JLizw/hqdefault.jpg",
  },
  {
    src: "https://vimeo.com/259411563",
    thumbSrc: "https://f.vimeocdn.com/images_v6/lohp/video1_thumbnail.png",
  },
]);

JS Bin Example

Passing options to the Video plugin:

Fancybox.show(
  [
    {
      src: "https://www.youtube.com/watch?v=z2X2HaTvkl8",
      width: 640,
      height: 360,
    },
  ],
  {
    Carousel: {
      Video: {
        autoplay: false,
      },
    },
  }
);

JS Bin Example

Dimensions

Video dimensions and aspect ratios can be controlled using per-slide options, CSS, or the HTML data attributes data-width, data-height and data-aspect-ratio.

Example of customization using CSS:

.has-html5video .f-html,
.has-youtube .f-html,
.has-vimeo .f-html {
  max-width: 640px;
  max-height: 360px;
}

JS Bin Example

Custom source type

If you want to display a file in the HTML5 video player that is not automatically recognized, you can do so using the data-type="html5video" attribute. Use the data-html5video-format attribute to set a custom source type.

Example of using dash.js to display MPD file:

<a
  href="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"
  data-fancybox
  data-type="html5video"
  data-html5video-format="application/dash+xml"
>
  <img
    alt="Video poster"
    width="240"
    height="180"
    src="https://reference.dashif.org/dash.js/nightly/samples/lib/img/bbb-1.jpg"
  />
</a>

Fancybox.bind("[data-fancybox]", {
  on: {
    "Carousel.attachSlideEl": (fancyboxRef, carouselRef, slide) => {
      const videoEl = slide.el?.querySelector("video");

      if (videoEl && slide.src.endsWith(".mpd")) {
        const player = dashjs.MediaPlayer().create();
        player.initialize(videoEl, slide.src, true);
        player.setMuted(false);
      }
    },
  },
});

JS Bin Example

Here is an example of how to play an MP3 file and also customize the background color:

.has-mp3 .f-html,
.has-mp3 video {
  background: transparent;
}

<button
  data-src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
  data-fancybox
  data-width="400"
  data-height="50"
  data-type="html5video"
  data-html5video-format="audio/mpeg"
  data-class="has-mp3"
>
  Play MP3 file
</button>

JS Bin Example