0

I'm trying to map an image. so when the map-area is click, it will open a you tube video I found this great example but i can't get to work with a you-tube video.

any help will be appreciated since im doing this for a non profit organisation thank you

Note I found this example http://jsfiddle.net/ffZ7B/4/ from another stack flow member:Scoobler

but i can't comment on his post

I'm using query.fancybox-1.3.4.js

HTML

<img src="/path/to/small/image" />
<map name="Map" id="Map">
<area shape="poly" coords="0,0,0,328,145,328" href="#" />
<area shape="poly" coords="0,0,180,0,328,328,142,328" href="#" />        
<area shape="poly" coords="328,328,328,0,180,0" href="#" />    
</map>

jQuery:

$('map > area.fancybox').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
var title = $(this).attr('title');
var type = $(this).attr('rel');
$.fancybox({
    'title': title,
    'titlePosition': 'inside',
    'href' : url,
    'type' : type
});

});

yoyojonathan
  • 3
  • 1
  • 2

1 Answers1

1

For youtube videos, you need the right Fancybox (v1.3.x) script so based on the jsfiddle example above tweak the code like:

$(document).ready(function() {
 $('map > area.fancybox').click(function(e) {
  $.fancybox({
   'padding'        : 0,
   'autoScale' : false,
   'transitionIn' : 'none',
   'transitionOut' : 'none',
   'title' : this.title,
   'width' : 640,
   'height' : 390,
   'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
   'type' : 'swf',
   'swf' : {
     'wmode' : 'transparent',
     'allowfullscreen' : 'true'
   }
  }); // fancybox
  return false;
 }); // click
}); //  ready

Of course, you need to set the proper href in your area shape code like 

<map name="Map" id="Map">
 <area class="fancybox" shape="poly" coords="0,0,0,328,145,328" href="http://www.youtube.com/watch?v=3l8MwU0IjMI&autoplay=1" title="barred owl spotted on a school playground " />
 <area class="fancybox" shape="poly" coords="0,0,180,0,328,328,142,328" href="http://www.youtube.com/watch?v=zYaFXvcnIko&autoplay=1" title="Screaming ride in California Adventure"/>        
 <area class="fancybox" shape="poly" coords="328,328,328,0,180,0" href="http://www.youtube.com/watch?v=SEBLt6Kd9EY&autoplay=1" title="Ducks blown off their feet by the wind" />
</map>

See demo here

JFK
  • 40,963
  • 31
  • 133
  • 306
  • just one more thing,is anyway i can this to work with a html5 video from youtube – yoyojonathan Feb 20 '12 at 15:49
  • or it is html5 video or it is youtube ... I guess you meant youtube embed video, did't you? if so, check this http://stackoverflow.com/a/9337567/1055987 for such code – JFK Feb 20 '12 at 23:16
  • i was trying to make the website flash free so i was thinking on using html5 videos from youtube "YouTube HTML5 Video Player " but the link you gave me and idea how to do it ,,thank you once again – yoyojonathan Feb 21 '12 at 02:31