Videos

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

Video dimensions and aspect ratios can be controlled using CSS, HTML data attributes, or per-slide options Example of CSS:

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

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>

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>

Example of customization by passing options to the Video plugin:

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

Programmatic

Example of displaying a single video:

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

Video gallery with thumbnails:

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

Passing options to the Video plugin:

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