Question

使用fancybox（http://fancyapps.com/fancybox/）

时，我无法在调整窗口大小时正确调整vimeo嵌入式iframe的大小

在调整窗口大小时，Fancybox调整大小，嵌入式视频也是如此（使用下面的代码）。

然而，重新调整窗口大小并且fancybox保持不变，视频也是如此。

请看这里：http://jsfiddle.net/prng9/1/ - 调整结果框的大小，然后重新调整（调整大小不是说实话 - 如果有人有更好的方法请告诉我 - 代码是基于此：http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php）

这是我正在使用的精美箱子代码：

jQuery(document).ready(function($) {
    var htmlcontent = "<html><body><div class='vimeo_embed'><iframe class='vimeo' src='//player.vimeo.com/video/47438073' width='500' height='281' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></body></html>";

  jQuery.fancybox.open(
    {
        content: htmlcontent,
        type:'ajax',
        padding : 0,
        afterShow: function(current,previous) {
            var vid = jQuery('iframe.vimeo');
            var ht = vid.height();
            var wd = vid.width();
            vid.attr('data-aspectRatio', ht / wd)
                .width(wd)
                .height(ht)
                .removeAttr('width')
                .removeAttr('height');
            },
        onUpdate: function() {
            //should run when size or orientation is changed
            var vid = jQuery('iframe.vimeo');                               
            var newWidth = jQuery('.vimeo_embed').width();
            vid.width(newWidth).height(newWidth * vid.attr('data-aspectRatio'));
    }
  });  
});

注意：我知道如果直接链接到视频，fancybox允许vimeo调整大小 - 例如我可以使用http://player.vimeo.com/video/47438073作为href，以及媒体助手，一切都会好的。但是，我对视频观看有一定数量的访问控制和跟踪，因此我使用其他页面上嵌入的视频。因此，我在上面的示例中包含了html代码的原因 - 这模拟了相同的环境。

感谢。

Answer 1

如果您已经将视频包装在iframe内，请让fancybox代替这项工作，以便您可以这样做：

var htmlcontent = "//player.vimeo.com/video/47438073";
$.fancybox.open({
    href: htmlcontent,
    padding: 0,
    type: 'iframe',
    width: 640, // or whatever
    height: 360,
    aspectRatio: true, // <== this keep your vimeo aspect ratio after resize
    scrolling: 'no'
});

参见 JSFIDDLE

Answer 2

JFK的回答让我有不同的想法，我找到了一种方法 - 在href <a>的网站上设置嵌入视频的链接，并在此元素中添加一个数据值vimeo播放器的链接：

<a href="/link_on_site_to_embedded_video" data-href="//player.vimeo.com/video/47438073">Open fancybox</a>

JS：

$('a').fancybox({
    padding: 0,
    type: 'iframe',
    width: 640,
    height: 360,
    aspectRatio: true,
    scrolling: 'no',
    beforeLoad: function() {
        var url= $(this.element).data("href");
        this.href = url
    }
});

如果用户未启用Javascript，则会将其转到嵌入式视频页面。

如果他们启用了Javascript，则在加载内容之前更新内容以显示vimeo视频 - 他们将“看到”嵌入的视频链接（例如，如果右键单击＆gt;复制链接地址或在新标签中打开）。

这正是我需要的行为。

当然，正如JFK指出它并非万无一失 - 他们仍然可以在代码中看到vimeo链接，但如果有人希望搜索代码，欢迎使用它们。

请参阅此处http://jsfiddle.net/BHfv8/

fancybox-2中的响应式vimeo - 如何在fancybox调整大小时调整视频大小

2 个答案: