HTML

This built-in plugin adds support for inline content, videos (HTML5, Youtube and Vimeo), iframes, Google maps, and Ajax content. Supported websites can be used with Fancybox by simply specifying the URL of the page.

Usage

Inline content

Create the HTML element you want to display in the modal, give it a unique id attribute and hide it using CSS.

html

<div id="dialog-content" style="display:none;max-width:500px;">
  <h2>Hello, world!</h2>
  <p>
    <input type="text" value="" />
  </p>
  <p>
    Try hitting the tab key and notice how the focus stays within the dialog
    itself.
  </p>
  <p>
    To close dialog hit the esc button, click on the overlay or just click the
    close button.
  </p>
  <p>
    Element used to launch the modal would receive focus back after closing.
  </p>
</div>

TIP

To make text selectable, add the "data-selectable" attribute to the entire element, or just part of it.

Declarative

Use data-src attribute to specify target ID. If you prefer to display a copy of the element, use data-type="clone" attribute.

html

<button data-fancybox data-src="#dialog-content">Launch Dialog</button>

JSFiddle Example

Programmatic

// Show HTML element
Fancybox.show([{ src: "#dialog-content", type: "inline" }]);

// Show a copy of the element
Fancybox.show([{ src: "#dialog-content", type: "clone" }]);

JSFiddle Example

Videos

Fancybox supports YouTube, Vimeo and HTML5 videos out of the box. The video will pause whenever it's not visible and resume as soon as it becomes visible again. Control video sizes using CSS or the data-width and data-height attributes.

Note. Modern browsers such as Chrome, FireFox and Safari can block videos from playing automatically if the sound is on by default.

Declarative

An example of an HTML5 video with custom dimensions:

html

<a href="video.mp4" data-fancybox data-width="640" data-height="360">
  HTML5 video
</a>

JSFiddle Example

Video gallery with thumbnails:

html

<a href="video-a.mp4" data-fancybox="gallery">
  <img src="thumbnail-a.jpeg" />
</a>

<a href="video-b.mp4" data-fancybox="gallery">
  <img src="thumbnail-b.jpeg" />
</a>

<a href="video-c.mp4" data-fancybox="gallery">
  <img src="thumbnail-c.jpeg" />
</a>

JSFiddle Example

Examples of supported links:

// YouTube video
https://www.youtube.com/watch?v=z2X2HaTvkl8

// YouTube video with custom start time
https://www.youtube.com/watch?v=dZRqB0JLizw&t=40s

// Vimeo video
https://vimeo.com/259411563

// Vimeo video with custom start time
https://vimeo.com/577635596#t=11m11s

// Private Vimeo video with hash
https://vimeo.com/705652986/edf22302ef

MP3 audio file with a poster:

html

<a
  href="file_example.mp3"
  data-fancybox
  data-type="html5video"
  data-thumb="https://lipsum.app/id/28/200x150"
>
  MP3 file
</a>

Programmatic

// 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",
  },
]);

JSFiddle Example

Iframes

Fancybox will preload iframed pages and resize self to fit the content. It is also possible to set only width, then Fancybox will calculate the corresponding height. Note that due to browser security policies, auto-sizing will only work for local files. You can use preload option to disable this feature.

Declarative

html

<a href="iframe.html" data-fancybox data-type="iframe">Defaults</a>

<a href="iframe.html" data-fancybox data-type="iframe" data-preload="false">
  Preloading is disabled
</a>

<a href="data:text/html,<p>Some HTML</p>" data-fancybox data-type="iframe">
  Dynamic iframe content
</a>

<a data-fancybox data-type="pdf" href="your.pdf">PDF file</a>

JSFiddle Example

There are two ways to resize an iframe. The easiest is to use the data-width and data-height attributes for the trigger elements:

html

<a
  href="https://fancyapps.com/iframe.html"
  data-fancybox
  data-type="iframe"
  data-width="400"
  data-height="400"
>
  Custom width and height using data attributes
</a>

JSFiddle Example

Another way is to use CSS to select the element that contains the iframe element. If the content of the iframe is accessible (e.g., iframe is in the same domain), then you should disable the iframe auto-sizing feature. If you want it to look the same on small screen devices, disable compact mode or use an additional CSS rule.

css

/* For compact mode */
.fancybox__container.is-compact .fancybox__slide.has-iframe .fancybox__content {
  width: 100%;
  height: 100%;
}

/* For all other cases */
.fancybox__slide.has-iframe .fancybox__content {
  width: 400px;
  height: 400px;
}

Fancybox.bind("[data-fancybox]", {
  // Optionally disable "compact" mode
  // compact: false,

  Html: {
    autoSize: false,
  },
});

JSFiddle Example

If you want to individually control the width and height of the iframe using CSS, the easiest way is to add a custom class to the slide element (using data-custom-class attribute) and use it to select the iframe's wrapper element:

html

<a
  href="https://fancyapps.com/iframe.html"
  data-fancybox
  data-type="iframe"
  data-custom-class="my-iframe"
>
  Custom width and height using CSS
</a>

css

/* For compact mode */
.fancybox__container.is-compact .fancybox__slide.my-iframe .fancybox__content {
  width: 100%;
  height: 100%;
}

/* For all other cases */
.fancybox__slide.my-iframe .fancybox__content {
  width: 400px;
  height: 400px;
}

JSFiddle Example

Programmatic

Fancybox.show([
  {
    src: "https://fancyapps.com/iframe.html",
    type: "iframe",
    preload: false,
    width: 600,
    height: 300,
  },
]);

JSFiddle Example

Google maps

Fancybox automatically recognizes and displays various Google maps links.

Forming the Search URL

If you want to display a map with a pin and location information at the specified location, create a link by following the Google Maps documentation or by performing these steps:

Copy this template: https://www.google.com/maps/search/?api=1&query=QUERY&query_place_id=PLACE_ID
Replace QUERY in the template with a URL-encoded search query.
For example, the address "Westminster Bridge, London" should be converted to Westminster+Bridge%2C+London.
Use Place ID Finder to find an ID for your place and replace PLACE_ID in the template with the result.
For example, the address "Westminster Bridge, London" has the ID ChIJoaH8k8YEdkgRnmDd5iuUl9Y.
The end result should be something like this:
https://www.google.com/maps/search/?api=1&query=Westminster+Bridge%2C+London&query_place_id=ChIJoaH8k8YEdkgRnmDd5iuUl9Y

Declarative

html

<a
  href="https://www.google.com/maps/search/?api=1&query=Westminster+Bridge%2C+London&query_place_id=ChIJoaH8k8YEdkgRnmDd5iuUl9Y"
  data-fancybox
>
  Launch Map
</a>

JSFiddle Example

Examples of supported links:

https://www.google.com/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572
https://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16
https://www.google.com/maps/@37.7852006,-122.4146355,14.65z
https://www.google.com/maps/search/Empire+State+Building/
https://www.google.com/maps/search/?api=1&query=centurylink+field
https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393

It is also possible to use a direct link to an embedded iframe page:

html

<a
  href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d10500.902039411158!2d2.2913514905137315!3d48.85391001859112!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1slv!2slv!4v1622011463926!5m2!1slv!2slv"
  data-fancybox
  data-type="iframe"
  data-preload="false"
  data-width="640"
  data-height="480"
>
  View Google Map
</a>

In this case, if you want to remove the border around the map, use this CSS snippet:

css

.fancybox__slide.has-iframe .fancybox__content {
  padding: 0;
}

JSFiddle Example

Programmatic

Fancybox.show([
  {
    src: "https://www.google.com/maps/@51.5039653,-0.1246493,14.12z",
    width: 800,
    height: 600,
  },
]);

JSFiddle Example

Ajax

Declarative

To load your content via AJAX, add data-type="ajax" to your links, example:

html

<a data-fancybox data-type="ajax" href="ajax.html">Load content using AJAX</a>

To show only part of an AJAX response, use data-filter attribute with a selector, example:

html

<a data-fancybox data-type="ajax" data-src="ajax.php" data-filter="#content_B">
  Load content using AJAX and show only element with ID `content_B`.
</a>

Programmatic

Fancybox.show([
  {
    src: "ajax.html",
    type: "ajax",
  },
]);

Options

`ajax`

A body of data to be sent in the XHR request

Type

Document | XMLHttpRequestBodyInit | null

Default

null

`autoSize`

If resize the iframe element to match the dimensions of the iframe page content

Type

boolean

Default

true

`iframeAttr`

Attributes of an iframe element

Type

Record<string, string>

Default

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

Example

https://jsfiddle.net/h2L1a475/

`preload`

If wait for iframe content to load before displaying

Type

boolean

Default

true

`videoAutoplay`

If videos should start playing automatically after they are displayed

Type

boolean

Default

true

`videoTpl`

HTML5 video element template

Type

string

Default

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

Example

https://jsfiddle.net/opy4k1Lv/

`videoFormat`

Default HTML5 video format

Type

string

Default

""

`videoRatio`

Aspect ratio of the video element

Type

number

Default

16 / 9

`vimeo`

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

Type

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

Default

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

`youtube`

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

Type

{
  controls: 0 | 1;
  enablejsapi: 0 | 1;
  rel: 0 | 1;
  fs: 0 | 1;
}

Default

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

Example

https://jsfiddle.net/apfm0Lxj/

HTML #

Usage #

Inline content #

Declarative #

Hello, world!

Programmatic #

Videos #

Declarative #

Programmatic #

Iframes #

Declarative #

Programmatic #

Google maps #

Forming the Search URL #

Declarative #

Programmatic #

Ajax #

Programmatic #

Options #

ajax #

autoSize #

iframeAttr #

preload #

videoAutoplay #

videoTpl #

videoFormat #

videoRatio #

vimeo #

youtube #

HTML

Usage

Inline content

Declarative

Programmatic

Videos

Declarative

Programmatic

Iframes

Declarative

Programmatic

Google maps

Forming the Search URL

Declarative

Programmatic

Ajax

Programmatic

Options

`ajax`

`autoSize`

`iframeAttr`

`preload`

`videoAutoplay`

`videoTpl`

`videoFormat`

`videoRatio`

`vimeo`

`youtube`