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

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