如何在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 
       });  
      });