I know image maps are supposed to be deprecated html entities. But sometimes, you have to work with what is provided and does not have the time to enhance and modify the template. In such a HTML template, there is an image map and from one of its AREA tags, I want to play a YouTube video in a light box. I have already used the plugin “Easy FancyBox” for displaying gallery photos – which works great. It is only natural that I would like to use the same plugin for playing the video, without having to install any other plugin. The challenge is that “Easy FancyBox” works only with A tags that have a href pointing to a YouTube video and a class set to “fancybox-youtube” (optional).

I looked into the plugin code, hoping to coax it to work with AREA tag as well, but no luck. I could get either A tags or Area tags to work with Easy FancyBox, but not both.

The workaround solution that I then come up with is to use a DIV tag containing a A tag with an image inside, which image is exactly the same the image inside the Area tag inside the image map. I then used margin settings to move the DIV tag on top of the image map area, covering it. Of course, the A tag contains the href pointing to the Youtube video, and I set the class to “fancybox-youtube” so that Easy Fancybox can tell that it need to open it in a lightbox. It works well for me.

  • Digg
  • del.icio.us
  • StumbleUpon
  • Sphinn
  • Facebook
  • Mixx
  • Google Bookmarks
  • Haohao
  • LinkedIn
  • Live
  • MyShare
  • MySpace
  • Reddit
  • Technorati
  • TwitThis

Related posts:

  1. Tweaking the Flow Player WordPress Plugin
  2. Search for a WordPress Plugin to Make A Private Blog
  3. Finding a Twitter Plugin for WordPress Blog
  4. Video Formats for the Web – F4V, MOV, or MP4?
  5. Selecting a Calendar Plugin for My Personal Blog

Tags: , , , , , ,

9 Responses to “Plugin “Easy FancyBox” and Youtube Video from Area Tag (Image Map)”

  1. Peng Zhang says:

    Wow, thanks for sharing your findings, Bryan.


  2. Bryan says:

    ok, sorted it out :)

    I was using px before, which is in fact a relative value for placing the button element, but I decided to try other value types nonetheless just to see what would happen:

    1. em = Result was the same as with px
    2. % = Bingo!
    Now the button element stays in the same place, even with a responsive layout. The button maintains the same position relative to the image underneath, no matter what size the browser window is, or if I view the site on my phone in vertical or horizontal position.
    3. ex- Did not try as #2 worked.


  3. Bryan says:

    Hi Peng,

    an update:

    I’ve discovered that I actually don’t need an image map at all!

    That is, I have a large/main image (a picture), with no button drawn on it and with no image map.

    Then, using the margin settings in the CSS, I just overlay the button image on top of the large/main picture, and I can place that button wherever I want, without having to worry about matching it exactly to the image map and button drawn underneath, because there is no image map/button underneath.

    So, I have the image map effect, but without the image map!

    Another thing though, I noticed that your site uses a static layout, which is good because the image map translates to displaying correctly on a phone.

    However, I like to use a responsive layout for my site, but this then screws up where the button displays on a mobile phone.

    Do you happen to know how I could use relative values instead of absolute pixel values to locate the button image where I want it?


  4. Peng Zhang says:

    Congratulations, Bryan, good stuff!

  5. Bryan says:

    Hi Peng,

    I figured it out!

    Thank you so much for the link to the page, by looking at the CSS with Firebug I was able to sort it out. Took a few hours, but as this is my first time looking at CSS I’m extremely happy with it :)


  6. Bryan says:

    oops, sorry about the bold in the reply, meant to do a block quote.


  7. Bryan says:

    Hi Peng,

    thank you so much for the link.

    It has helped tremendously for me to follow along :) Unfortunately, I’m stuck at 1 place:

    I then used margin settings to move the DIV tag on top of the image map area, covering it.

    I can’t seem to figure out where you do that :(

    I have it now so that the I am displaying 2 images, above is the main image, below is the button image, now the problem is, how to get the button image to overlap the main image.

    If I click on the button image, Easy Fancybox pops up, so at least I know that part is working :)

    Thank you very much for your time!


  8. Peng Zhang says:

    Hi, Bryan,

    Here is the page with an working example (http://www.spots-light.com) – check out the “play video” at center left.

    As for image maps, if I have no other choice, I would use it, just test it with the major browsers and versions that needs to be supported.


  9. Bryan says:

    Hello Peng,

    thank you for this informative post, I’m trying to do the exact same thing!

    Unfortunately, I don’t know anything at all about html or css, and I’m having trouble following your workaround.

    Would it be possible for you to post a code example and a link to the page where you did this so I can look at it with Firebug?

    Also, you mentioned image maps are supposed to be deprecated, what are we supposed to in the future?


Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">