Easy FancyBox

Easy FancyBox

Install now

Download Version

Requires WordPress: 3.3 or higher
Compatible up to: 4.7.3
Downloads: 1203866

Rating: 4.6 out of 5 stars
# Votes: 135

Easy FancyBox plugin for WordPress websites gives you a flexible and aesthetic light box solution for just about all media links on your website. Easy FancyBox uses the packed FancyBox jQuery extension and is WP 3+ Multi-Site compatible. After activation you can find a new section FancyBox on your Settings > Media admin page where you can manage the plugins options.

After activation, all links to JPG, GIF and PNG images are automatically opened in the FancyBox Mac/Gnome-style lightbox that floats over the web page. Most options available can be managed with this plugin along with some extra features.

Also supports:

  • All common image types including webp and image maps
  • WordPress Galleries
  • NextGEN galleries (see FAQs for instructions)
  • Youtube galleries via Youtube Simple Gallery plugin (see FAQs for instructions)
  • SWF (Flash) movies
  • SVG media images (thanks to Simon Maillard)
  • Links to Youtube, Vimeo and Dailmotion
  • Hidden inline content
  • iFrames
  • PDF files
  • Auto-popup on page load
  • links inside Gravity Forms in ajax mode

For advanced options and priority support, there is a Pro extension available.

See Screenshots for an impression on how images and YouTube movies will be presented on your site as soon as you have installed and (network) activated this simple plugin.

See FAQ’s for instructions to manage YouTube, Dailymotion and Vimeo movies (and similar services) and tips to make inline content display in a FancyBox overlay. Subscribe to Status301 for tips on how to get a high degree of control over what will be shown in a FancyBox overlay on your website.

Get support on the Easy FancyBox web page or WordPress forum.

Visit FancyBox for more information, examples and the FancyBox Support Forum. Please consider a DONATION for continued development of the FancyBox project.

– For increased site performance, simply install and activate the plugin Use Google Libraries to load jQuery from Googles CDN.


Please go to https://translate.wordpress.org/projects/wp-plugins/easy-fancybox/ and share your knowledge!

Current contributors:

Commercial message:


  1. easy-fancybox screenshot 1

    Example image with Overlay caption. This is the default way Easy FancyBox displays images. Other options are Inside and the old Outside.

  2. easy-fancybox screenshot 2

    Example of a YouTube movie in overlay.

Frequently Asked Questions

What’s FancyBox?
Basically, it is a fancy way of presenting images, movies, portable documents and inline content on your website. For example, if you have scaled-down images in your posts which are linked to the original large version, instead of opening them on a blank page, FancyBox opens those in a smooth overlay. Visit FancyBox for more information and examples.
Which version of FancyBox does this plugin use?
The same version as this plugin has. I aim to keep close pace to FancyBox upgrades and always move to the latest and greates version. Please, let me know if I’m lagging behind and missed an upgrade!
I installed the plugin. What now?
First, make sure that image thumbnails in your posts and pages are linked to their full size counterpart directly. Open any post with thumbnail images in it for editing and select the first thumbnail. Click the Edit Image button that appears and choose Link To: Media File. From now on, clicking that thumbnail should open the full size version in FancyBox.

The same thing goes for WordPress Galleries. Choose Link To: Media File when inserting a gallery tag.

I want to change something. Where is the settings page?
There is no new settings page but there are a few options you can change. You will find a new FancyBox section on Settings > Media. To see the default, check out the example under Screenshots
Help! It does not work…
Please follow the trouble shooting steps on Other Notes to determine the cause. If that fails, ask for support on the Easy FancyBox WordPress forum or go to the development site
Will a WordPress generated gallery be displayed in a FancyBox overlay?
Yes, but only if you used the option Link To: Media File when inserting the gallery! The gallery quicktag/shortcode should look something like [ gallery link="file" ].
The lightbox does not look good on mobile devices. What can I do about that?
The FancyBox 1.3.4 script that is used in this plugin was not developed with mobile devices in mind. The only way around this issue is currently to disable FancyBox for small screen sizes. You can do this by adding a text widget in your sidebar with the following code snippet.

<script type="text/javascript">
var pixelRatio = window.devicePixelRatio || 1;
if(window.innerWidth/pixelRatio < 641 ) {
  easy_fancybox_handler = null;

Tweak the value 641 to target other screen sizes.

Can I make a slideshow from my gallery?
In the Pro extension, there is an Advanced option called “Gallery Auto-rotation” for that.
Can I exclude images or other links from auto-attribution?
Yes. All links with class nolightbox that would normally get auto-enabled, will be excluded from opening in a FancyBox overlay.

<a href="url/to/fullimg.jpg" class="nolightbox"><img src="url/to/thumbnail.jpg" /></a>
Can NextGEN Gallery work with Easy FancyBox ?
NetxGEN has its own built in FancyBox version along with a choice of other lightbox scripts but if you prefer to use Easy FancyBox (because of better customisability) then you need to take some steps to make the two plugins compatible.

  1. Go to your Settings > Media admin page and switch OFF the FancyBox “Auto-gallery” option in the Images section;
  2. Go to Gallery > Other Options and set the Lightbox Effects option to “Custom” and click on Show Advanced Settings;
  3. fill the Code field with
class="fancybox" rel="%GALLERY_NAME%"
  1. Leave the other fields empty and save your settings.
Can I use ONE thumbnail to open a complete gallery ?
It can be done manually (using the internal WordPress gallery feature, or not) or in combination with NextGen Gallery.


A. Open your post for editing in HTML mode and insert the first image thumbnail in your post content (linking to the images file, not page) to serve as the gallery thumbnail.

B. Place the following code to start a hidden div containing all the other images that should only be visible in FancyBox:

<div class="fancybox-hidden">

C. Right after that starting on a new line, insert all other images you want to show in your gallery. You can even use the WordPress internal gallery feature with the shortcode . NOTE: if the gallery thumbnail is attached to the post, it will be show a second time when flipping through the gallery in FancyBox. If you do not want that, use an image that is not attached to the post as gallery thumbail.

D. Close the hidden div with the following code on a new line:


With NextGEN Gallery

You can choose between two shortcodes to show a gallery that (1) limits images per gallery using the shortcode [nggallery id=x] or (2) per tag name (accross galleries; you need to set tag name manually => more work but more control) using the shortcode [nggtags gallery=YourTagName,AnotherTagName].

General steps:

A. Place the shortcode of your choice in your page/post content.

B. Configure NextGen on Gallery > Gallery Settings to Display galleries as “NextGEN Basic Thumbnails” and then under the NextGEN Basic Thumbnails to at least have the following options set like this:

  1. Number of images per page: 1
  2. Use imagebrowser effect: No
  3. Add hidden images: Yes

C. Optional: add the following new CSS rule to your theme stylesheet (or install Custom CSS or Jetpack and add it on the new Appearance > Edit CSS admin page) to hide the page browsing links below the gallery thumbnail.

.ngg-navigation {
Can I play YouTube, Dailymotion and Vimeo movies in a FancyBox overlay?
Yes. Simply create a link using the Share URL (the full Page URL, the Short URL with or without options like HD etc.) to the YouTube/Vimeo/Dailymotion page in your post content. If you have Auto-detect enabled, the plugin will take care of the rest for you! 🙂

If you have disabled Auto-detection, give the link a class attribute like class="fancybox-youtube" for Youtube, class="fancybox-vimeo" for Vimeo and class="fancybox-dailymotion" for Dailymotion, to manually enable FancyBox for it.

Both YouTube and Vimeo movies can be made to play immediately after opening by adding the paramer autoplay=1 to the URL. For example, a short-url YouTube link that should play in HD mode, have the full screen button and auto-start on open, would look like:

<a href="http://youtu.be/N_tONWXYviM?hd=1&fs=1&autoplay=1">text or thumbnail</a>
I want that ‘Show in full-screen’ button on my YouTube movies
Append &fs=1 to your YouTube share URL.
Can I show a Youtube playlist in FancyBox?
Yes, just go to Youtube page of any movie that’s in the playlist and use the Share button to get the share URL just like with single movies, but this time place a checkmark at the ‘Share with playlist’ option.
Can I link a NextGEN thumbnail to a Youtube movie in FancyBox?
User Mark Szoldan shared a neat trick how to do this:

  1. Follow the instructions to make Easy FancyBox work smoothly with NextGEN above and make sure it all works correctly for normal thumbnails linked to their full-size version.
  2. Then give the image that you want to link to a Youtube movie the URL to the Youtube page as title.
  3. Finally paste the code below into a text widget that will live in your sidebar or footer bar, or you can hard-code it into your theme but make sure it come before the wp_footer() call…
<script type="text/javascript">
jQuery('.fancybox [title*="www.youtube.com"]').each(function() {
  var title = jQuery(this).attr('title');
  var desc = jQuery(this).parent().attr('title');
  jQuery(this).attr('title', desc);
  jQuery(this).parent().attr('href', title);

This script snippet will scan the image titles and if it finds a Youtube URL there, it will replace the links href attribute value accordingly.

Can I create a gallery of Youtube thumbnails which open in FancyBox?
You could do this manually by uploading individual thumbnails that you can retrieve by using the unique movie ID in these URLs for three different sizes:


Other locations might be

http://img.youtube.com/vi/UNIQUE-MOVIE-ID/0.jpg (same as hqdefault.jpg)
http://img.youtube.com/vi_webp/UNIQUE-MOVIE-ID/0.webp (same as hqdefault.webp)

But an easier method is this one, shared by Shashank Shekhar (thanks!) :

To create Youtube thumbnail galleries, install http://wordpress.org/plugins/youtube-simplegallery/ and set the ‘Effect’ option to fancybox. Then disable Youtube autodetection on Settings > Media.

Can I display web pages or HTML files in a FancyBox overlay?
Yes. First, enable the iFrame option on Settings > Media. Then, in your post or page content create a link with either class="fancybox-iframe" or class="fancybox iframe" (notice the space instead of the hyphen) to any web page or .htm(l) file in your content.

NOTE: The difference between these two classes (‘-‘ or space) is in size of the overlay window. Try it out and use the one that works best for you 🙂

Can I show PDF files in a FancyBox overlay?
Yes. Just place a link with the URL ending in .pdf to your Portable Document file in the page content.

If you do’nt have Auto-detect checked under PDF on Settings > Media admin page, you will need to add class="fancybox-pdf" (to force pdf content recognition) to the link to enable FancyBox for it.

Can I play SWF files in a FancyBox overlay?
Yes. Just place a link with the URL ending in .swf to your Flash file in the page content.

If you do’nt have Auto-detect checked under SWF on Settings > Media admin page, you will need to add either class="fancybox" or class="fancybox-swf" (to force swf content recognition) to the link to enable FancyBox for it.

How do I show content with different sizes?
FancyBox tries to detect the size of the content automatically but if it can not find a size, it will default to the settings for that particular content type as set on the Settings > Media page.

The Pro extension provides an extra option to allow you to manually override this by defining the width and height wrapped in curly brases in the class attribute of the link itself. Make sure the option “Inlcude the Metadata jQuery extension script…” under FancyBox | Links on Settings > Media is enabled.

For example, a Flash movie with different size:

<a class="fancybox-swf {width:1024,height:675}" href="link-to-your-swf"></a>
The flash movie in the overlay shows BELOW some other flash content that is on the same page!
Make sure the OTHER flash content as a wmode set, preferably to ‘opaque’ or else ‘transparent’ but never ‘window’ or missing. For example, if your embedded object looks something like:

<object type="application/x-shockwave-flash" width="200" height="300" data="...url...">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="...url..." />

just add <param name="wmode" value="opaque" /> among the other parameters. Or if you are using an embed like:

<object width="640" height="385">
<param name="movie" value="...url..."></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="...url..." type="application/x-shockwave-flash" width="640" height="385" allowscriptaccess="always" allowfullscreen="true" wmode="window"></embed>

just change that wmode="window" to wmode="opaque" or add the attribute if it is missing.

How can I display INLINE content in a FancyBox overlay ?
First go to your Settings > Media admin page and activate the Inline option under the FancyBox settings. After saving, the amin page will show a new section called Inline where you can tweak its parameters.

Next, open your page/post for editing in the HTML tab and wrap the inline content in

<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" class="hentry" style="width:460px;max-width:100%;">
...inline content here...

Then place a FancyBox link tag with class attribute “fancybox-inline” anywhere else in the post/page content that will point to the inline content like

<a href="#fancyboxID-1" class="fancybox-inline">Read my inline content</a>

NOTE: The wrapping divs ID must be unique and it must correspond with the links HREF with a # in front of it. When using the above example for more FancyBox inline content (hidden div + opening link) combinations on one page, give the second one the ID fancyboxID-2 and so on…

NOTE 2: If you find that the inline contect shown in FancyBox is styled very different than the rests of the page content, then you might want to change the div tag attribute class="hentry" to something else that matches your theme. Find out what class name is used for the main content on your site and re-use that.

Can I display a contact form in FancyBox?
Yes. There are several methods imaginable but the easiest would be to use the Inline method. First go to your Settings > Media admin page and enable the Inline Content option. Next, go back to edit your post or page in the Text editor tab. The inline content can be a shortcode like in this example using Contact Forms 7 and Easy FancyBox:

<a href="#contact_form_pop" class="fancybox-inline">Contact Us</a>

<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop" class="hentry" style="width:460px;max-width:100%;">
        [contact-form-7 id="87" title="Contact form 1"]

Where you replace the shortcode (between the [ and ] characters) with the one given by the plugin. It can also work with shortcode by other plugins like Jetpack’s Contact Form module. Change the class attribute to reflect the class used for the div that wraps your post content to have any form CSS style rules that are limited to post content, be applied to the inline content inside FancyBox.

Can I make an image or hidden content to pop up in FancyBox on page load?
Yes. A link that has the ID fancybox-auto (Note: there can be only ONE link like that on a page!) will be triggered automatically on page load.

Use the instructions above for inline content but this time give the link also id="fancybox-auto" (leave the class too) and remove the anchor text to hide it. Now the hidden div content will pop up automatically when a visitor opens the page.

Same can be done with an image, flash movie, PDF or iframe link! But please remember there can be only one item using the ID fancybox-auto per page…

Can I make a menu item open in a FancyBox overlay ?
Yes. But it depends on you theme what you need to do to make it work. If you are on WordPress 3+ and your theme supports the new internal Custom Menu feature or if you are using a custom menu in a sidebar widget, it’s easy:

  1. Go to Settings > Media and enable FancyBox iFrame support.
  2. Go to Appearance > Menus and open the little tab “Screen Options” in the top-right corner.
  3. Enable the option “CSS Classes” under Advanced menu proterties.
  4. Now give the menu item you want to open in a FancyBox iframe the class fancybox-iframe.

If you are on an older version of WordPress or if you cannot use WP’s Menus, you will need to do some heavy theme hacking to get it to work. Basically, what you need to achieve is that the menu item you want opened in a lightbox overlay, should get a class=”fancybox-iframe” tag.

Is Easy FancyBox multi-site compatible?
Yes. Designed to work with Network Activate and does not require manual activation on each site in your network.


Latest version: Download Easy FancyBox [zip]
Downloaded 1203866 times.

Rated 4.6 out of 5 stars with a total of 135 votes on WordPress.org »

1,150 thoughts on “Easy FancyBox

    1. RavanH Post author

      Hi Shamo, without clicking anything I already see three warnings:

      Invalid App Id: Must be a number or numeric string representing the application id.
      The "fb-root" div has not been created, auto-creating.
      FB.getLoginStatus() called before calling FB.init().

      Please check your share button settings. I don’t think this is related to FancyBox.

  1. marcelcowan

    Hi, Do you have a setting (or code) to disable the Save features. We want to stop visitors saving the PDFs for themselves from the lightbox. Thanks.

    1. RavanH Post author

      Hi Marcel, redering of PDF files inside a browser is dependant on a browser plugin. This is also the case with PDFs inside a FancyBox lightbox frame. Most visitors (unless your visitors are mostly Mac users) will be using a browser with either the Adobe Acrobat Reader plugin or the Chrome PDF Viewer plugin. In the first case, adding a the parameter #toolbar=0 ( see more parameters on http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf ) to the file URL might help. In the latter case, I’m not sure if you can disable the save button at all…

  2. Pingback: Modifiche a questo sito effettuate: in fase di test - The New Blog Times

  3. Pingback: [WP] お世話になっているテーマとプラグイン | PRO'LOGUE

  4. lynn lee

    I’m trying to use your plugin on my WordPress site, inside a widget box, to play a video widget.
    First, I installed and activated the plugin, but I see no FancyBox setting on my Settings>Media page to activate inline content. How do I find them?

    Next, after I activate the inline setting, where’s the correct place to insert your code? My current video code starts and ends with an

    1. RavanH Post author

      Hi Lynn, first things first: there should be a FancyBox section on your Settings > Media admin page after activating the plugin. If not, there is something going wrong. Can you check to see if the plugin is indeed activated and if not, try again and look for any error messages… Otherwise, you might try to find related errors if you have access to server/hosting error logs. Please let me know if you find anything.

  5. Pingback: Some things about WordPress | Meandering Passage

    1. RavanH Post author

      Hi Carole, although in theory possible, it is more complicated than is sounds. You’d have to modify the form (plugin?) so that it issues a javascript:jQuery.fancybox.close(); command but only upon success. Not on failing user input (missing e-mail address for example) else the user will not see the input errors allowing him/her to correct them and submit again…

  6. Rowlan

    I have posted this before for another project but couldn’t come right, been struggling for a week now to get it working.

    I want to use a fancybox popup when I click on a product in the woocommerce shop.

    I added class=”fancybox-iframe” to the content-product.php file in woocommerce :

    <li <?php post_class( $classes ); ?>>

    <?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

    <a href="<?php the_permalink(); ? rel="nofollow">" class="fancybox-iframe">

    and the popup works fine.

    If the user chooses not to add the product and just close the popup than that’s fine, it works as it should.


    If the user chooses to add a product, what needs to happen is that when they click “Add to Cart”, the popup must close and refresh the shop (parent) page so that the cart gets updated.

    Any ideas what I need to add to where to get this to work?

    1. RavanH Post author

      Hi Rowlan, to close a fancybox iframe you will need to issue a javascript command: parent.jQuery.fancybox.close();

      But it might be easier to hook into Woocommerce to make it do a page refresh after adding anything to the cart. A page refresh will update the visible cart content and remove the lightbox at the same time.

  7. Andrew

    Wonder if you can help with this? I’ve used the plugin several times in the past and it’s great, recently however i noticed that enabling the plugin causes my cycle2 slideshow to briefly display all of it’s slides on page load despite the measures i’ve taken to avoid this (display: block on first slide, display: none on the rest).

    I realise it may be an issue with Fancybox itself, but since i don’t need fancybox on the page where my slideshow is, is there a way to -not- include it for that page specifically using this plugin? Any help appreciated!

    1. RavanH Post author

      Hi Andrew, to disable fancybox on your homepage you need to place the following script snippet on that page only. Either in the page content, or in the page template before the wp_footer()) call, or in a widget that only shows on the home page with JetPack module Widget Visibility (for example). Use the code:

      <script type="text/javascript">
      easy_fancybox_handler = null;

  8. jasonkadlec

    Any ideas why jQuery.fancybox.open([ ] { });

    Isn’t working / or how to use this same kind of API call with the Easy Fancy Box plugin?

    On a page where I have everything working as usual with the plugin, if I put into the console:

    type: ‘inline’,
    href : ‘#fancyboxID-signup’,

    ], {
    padding : 20

    — or jQuery.fancybox.open etc …

    I get back that TypeError: undefined is not a function– where #fancyboxID-signup is successfully launched in the modal when clicking on an image with that value in the href.

    I see it working on http://jsfiddle.net/NDM5F/ — and I see that jquery.fancybox.js is being loaded by Easy Fancy Box plugin… so I just can’t seem to figure out why I’m not able to fire a modal open using the API in this way.

    Thanks for pointing me in the right direction to a different tutorial or method to open a modal.. ultimately what I’m trying to do is open the modal on the 2nd time someone clicks an object.

    I’m already using Easy Fancy Box all over the site & love how it kind of springs out from the point clicked.

    So I’m wanting to use it for this as well, but here I can’t simply link the thing… though I suppose a hack would be to add the href attribute to the thing on the second click hmmmmm

    but alas I still need to launch a modal via pure javascript for another reason.


  9. Pingback: Easy FancyBox - лайтбокс для Wordpress

  10. BianLei

    Hi, there. I’m a big fan of this plugin. But currently I’m facing an issue that Google master tool reminds me about malware in “easy-fancybox/jquery.easing.pack.js?ver=1.3” This happens twice. First time was false positive, I think this time is false positive as well. The sample malware snippet is:

    document.write('<style>.ifbeky { position:absolute; left:-1007px; top:-1975px} «t;/style> <div class="ifbeky"><iframe src="xxxxxx" width="314" height="107"></iframe></div>');

    But every time Google reminds me this I still couldn’t find it out. Refer to the reply here: (https://wordpress.org/support/topic/malware-in-this-plugin?replies=5) I think it is just a false positive but really annoying(Because Google Chrome gaves alarm page to my visitors). I’ve tried remove Easy FancyBox and re-install it for sure there is no injected code in the file. Do you know how is this happened?

    1. RavanH Post author

      Hi Banlei,

      That code does look very suspicious (I removed the URL because it points to site that includes malware!). It is however not part of the easy-fancybox/jquery.easing.pack.js file when installed fresh from the WordPress directory. If that code it is indeed included on your site, please consider it a (very) high possibility your site was hacked.

      1. BianLei

        Happy to see the problem is not from this plugin. Thank you.

        ————-Things that not related to 【Easy FancyBox】
        The thing is, those suspicious snippet provided by Google master tool doesn’t exist on my whole site content. Funny thing is, Google master tool started detect my webpage which I was deleted for a year, and Google marked it as suspicious code and gives me with suspicious code sample… Have you seen this condition before?

        1. RavanH Post author

          Hi BianLei, no I have not seen that before. Checking your site on http://sitecheck.sucuri.net/ does indeed reveal it as being blacklisted. You’ll need to perform an in-depth investigation into if any and what files where actually changed on your site (you can use a simple FTP program to see file modification dates) and find which files have bad code inserted. After you have cleaned your site (not only the bade code itself but also the security hole they used to get in!!) then you can use the “Request Review” link in your Google Webmaster Tools account.

    1. RavanH Post author

      Hi kan8net, yes you may. And I will answer: “Because the licence under which fancyBox2 is distributed is incompatible with the terms of hosting on the WordPress.org Plugin Directory.” Not GPL, not allowed. Sorry.

  11. Pingback: Tekst w modalu z wtyczką Easy Fancybox | Hekate Design

  12. Pingback: Espace Courbe Formation - Blogue

  13. Pingback: Easy fancybox: Dynamic website elements (Plugin review) - Prolinkstm

  14. Pingback: PDFs in einem neuen Fenster öffnen - Evince

  15. Pingback: How we built a full WordPress website in 8 hours Copy | Cortex WordPress Theme

  16. Pingback: How we built a full Wordpress website in 8 hours - COVERT NINE

  17. Pingback: How we built a full WordPress website in 8 hours | Cortex Restaurant

    1. RavanH

      Hi Sam, if you do not want to show any link or button then just create an empty anchor like <a href="#popup" class="fancybox-inline" id="fancybox-auto"></a>

  18. markus

    Hi there, i use the fancybox for overlaying a site with an iframe. is it possible to show the arrows to switch through multiple iframes?

  19. Hannah

    Hi There, I’ve been using this plugin for a while and I’m not sure if this has always happened but when you try to open a video iframe in Internet Explorer it opens up windows media player or another video program on IE and doesn’t play the video in the iframe. Any ideas? Thanks

    1. RavanH Post author

      Hi Hanna, it depends on the browser. To play a video in a browser (iframe or inline) you need a video player plugin or a browser that can play (HTML5) video natively. Are you using an older IE version? I don’t have IE to test with but you could try some of the video links on http://demo.status301.net/easy-fancybox-sandbox to see if the same thing happens there.

      1. Hannah

        Hi Ravan,

        Thanks for getting back, I’ve been testing this issue for a couple of days now. It seems like since IE dropped support for older browsers prior to 11 on January 12, 2016, something has changed and now when you try to open any mp4 video from an anchor link it automatically opens in an external video program. This happens on every IE version including the latest edge / 11. Using FancyBox alone with a webm version works using this demo: http://jsfiddle.net/5ev8r/186/ but if you take the webm away it does the external video opening. This is happening with your Indirect MOV support video iframe demo too. The site I use your plugin on cannot use YouTube or Vimeo etc to host their videos because the government blocks access to those and their employee’s need to view the site on the gov servers. The page I use this on has 30+ videos and increasing so your plugin worked really well because it didn’t need to load every video on the page. If I go with the FancyBox approach above I’d need to load all videos using the video element and hide them. I do really love your plugin and its only started doing this in 2016. I can’t find anything online directly specific to this issue and it will be a shame to have to try alternatives just for the sake of IE.

        Thanks again!

        1. RavanH Post author

          Hi Hannah, I’d have to take a look at this in Edge (I’ve got a Windows 10 somewhere) and I’ll let you know if it behaves the same for me. IF it does, it sounds indeed like MS dropped support for this kind of embedding and I’ll try to find a more compatible approach. Until then, you could consider using a player like JW Player to embed these videos. See http://demo.status301.net/easy-fancybox-sandbox/boxed-jw-player for a demo (the link at step 6) and basic instructions on how to combine JW Player and FancyBox. Not sure if that suits your needs though on pages with a very large number of videos as it needs to have every video element loaded inline. Also be aware that the main script is only need once and each video’s div and script must use matching but unique IDs.

  20. andrewtftc


    We’re having problems with our popup on our site where the registration form was placed. When we click on the button and tried closing it. It won’t close.

    See here: http://screencast.com/t/47WLzBhOD

    Is there are a way you can fix this issue?

    Please check our page here: http://theforextradingcoach.com/free-webinar.html

    Note: Try to refresh the page because we’ve setup a URL split test.

    Please reply to this email: admin@theforextradingcoach.com


    1. RavanH Post author

      Hi Mhel, there is an error occurring in the Easing script. It must be coming from a conflict with another script (from another plugin or from the theme) on the site. So you have to options. The easiest option: set the FancyBox transition to Fade. But if you really want the smooth pop-out effect, you’ll need find out if it’s another plugin or if it’s a conflict with the theme. My first guess would be the Page Scroll to ID plugin because that is using some kind of alternative easing effect…

  21. spxwebGonzalo

    Hi, i’m trying to load a form on page load.

    Here is the code i’m using:

    More info

    [contact-form-7 id=”181″ title=”ContactForm”]

    The link More info functions perfectly, but introducing the id=”fancybox-auto” not make any changes.

    I’m sure i’m doing wrong the code. (I’m using WordPress and Contact Form 7).

    ¿Can you help me?

    (I also post this question in https://wordpress.org/support/topic/pop-up-in-fancybox-on-page-load?replies=1)


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.