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