Skip to main content

HTML

Adds support for inline content, iframes, videos (HTML5, Youtube and Vimeo), Google maps, and Ajax content.

Usage#

Inline content#

Declarative#

Create an HTML element that you wish to display in a dialog. Set data-fancybox attribute to any element on the page to make it a trigger element. Use data-src attribute to specify target ID. If you prefer to display a copy of the element, use data-type="clone" attribute.

When the dialog closes, element will get returned to its original position in DOM and focus will be restored to whatever element was focused before.

<!-- Dialog Contents --><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 className="margin-bottom--none">    Element used to launch the modal would receive focus back after closing.  </p></div>
<!-- Dialog Trigger --><button data-fancybox="dialog" data-src="#dialog-content">Launch Dialog</button>

Programmatic#

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

Video#

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

Note: Modern browsers like Chrome, FireFox and Safari blocks all media with sound from playing automatically, by default.

Declarative#

<!-- HTML5 video --><a data-fancybox="video-gallery" data-src="/img/video.mp4" data-width="640" data-height="360">  <img src="/img/video.jpeg" width="200" height="150" /></a>
<!-- YouTube --><a data-fancybox="video-gallery" data-src="https://www.youtube.com/watch?v=z2X2HaTvkl8">  <img src="http://i3.ytimg.com/vi/z2X2HaTvkl8/hqdefault.jpg" width="200" height="150" /></a>
<!-- Vimeo --><a data-fancybox="video-gallery" data-src="https://vimeo.com/259411563">  <img src="https://f.vimeocdn.com/images_v6/lohp/video1_thumbnail.png" width="200" height="150" /></a>

Options#

video {Object}#

General options for any video content (Youtube, Vimeo, HTML5 video). Default:

{  autoplay: true,  ratio: 16 / 9,}

youtube {Object}#

Youtube embed parameters. Default:

{  autohide: 1,  fs: 1,  rel: 0,  hd: 1,  wmode: "transparent",  enablejsapi: 1,  html5: 1,}

vimeo {Object}#

Vimeo embed parameters. Default:

{  hd: 1,  show_title: 1,  show_byline: 1,  show_portrait: 0,  fullscreen: 1,}

html5video {Object}#

HTML5 video parameters. Default:

{    tpl: `<video class="fancybox__html5video" playsinline controls controlsList="nodownload" poster="{{poster}}">      <source src="{{src}}" type="{{format}}" />      Sorry, your browser doesn\'t support embedded videos, <a href="{{src}}">download</a> and watch with your favorite video player!    </video>`,    format: "",}