如何在Google Map标记上显示FancyBox视频？

Question

我有一个简单的应用程序与谷歌地图和标记。 点击标记我必须显示图像，幻灯片或视频。

这是为了显示图像所需要的JavaScript（正常工作）：

 google.maps.event.addListener(marker1, 'click', function() { 
    $.fancybox({ 
    href: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Tootsi_jaamahoone.jpg/800px-Tootsi_jaamahoone.jpg' 
       // other options 

       });  
      }); 

这是代替尝试我已显示视频：

 google.maps.event.addListener(marker3, 'click', function() { 
       $.fancybox({ 
        'type' : 'iframe', 
        // hide the related video suggestions and autoplay the video 
        'href' : 'http://www.youtube.com/watch?v=Q_W1apjU4Go', 
        'overlayShow' : true, 
        'centerOnScroll' : true, 
        'speedIn' : 100, 
        'speedOut' : 50, 
        'width' : 640, 
        'height' : 480 
       });  
      }); 

这里，我已经重新创建带有3个标记的谷歌地图的情况，其中一个可以看到一个图像，另一个是幻灯片，第三个是视频。 图像和幻灯片均工作正常，但不是视频我看到一个空白框：

http://jsbin.com/ANuyojoW/13/edit

有人也许知道我怎样才能正确地显示视频？

非常感谢！

Answer 1

使用以下JS：

Demo

// Video - Not working 
google.maps.event.addListener(marker3, 'click', function() { 
       $.fancybox({ 
        'type' : 'iframe', 
        // hide the related video suggestions and autoplay the video 
        'href' : 'http://www.youtube.com/watch?v=Q_W1apjU4Go'.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
        'overlayShow' : true, 
        'centerOnScroll' : true, 
        'speedIn' : 100, 
        'speedOut' : 50, 
        'width' : 640, 
        'height' : 480 
       });  
      });