fancybox 2.0.4和Vimeo

Question

我很難將新的fancybox（V.2.0.4 g81c12d7）與新的iframe vimeo嵌入代碼集成。 有人有解決方案嗎？

Answer 1

是的，最簡單的方法是使用新的vimeo的「universal player」嵌入您的視頻。

請按照下列步驟操作：

A）。從視頻頁面中選擇一個視頻，然後選擇圖標「embed」（通過視頻）。

B）。獲取iframe代碼，如下所示：

<iframe src="http://player.vimeo.com/video/34792993?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 

C）。提取src屬性的內容，並將其設爲您的鏈接一樣的href：

<a class="vimeo" href="http://player.vimeo.com/video/34792993?title=0&amp;byline=0&amp;portrait=0">open vimeo in fancybox</a> 

d）。那麼你的fancybox（版本2.x）自定義腳本應該是這樣的：

<script type="text/javascript"> 
$(document).ready(function() { 
$(".vimeo").fancybox({ 
    width: 400, 
    height: 225, 
    type: 'iframe', 
    fitToView : false 
}); 
}); 
</script> 

注意我從iframe代碼width和height。

UPDATE（2013年6月25日）：另一種更簡單便捷的方式觀看fancybox中的vimeo視頻（v2.1.5與今天一樣）正在使用fancybox媒體助手。檢查https://stackoverflow.com/a/17202629/1055987作進一步參考。

Answer 2

因爲我們只能調整iframe的視頻，如果它是在我們自己的領域，我通過複製

http://cache.vevo.com/m/html/embed.html 

所有HTML內容http://localhost/vevo.html解決了這個問題。然後，改變了CSS：

#videoPlayerSWF { 
     width: 100%; 
     height:100%; 
    } 

現在，我使用調用的fancybox網址：

http://localhost/vevo-embed.html?video=USUV71402745 

具有相同的HTML，CSS和JavaScript爲：

http://cache.vevo.com/m/html/embed.html