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

【问题标题】：Responsive vimeo in fancybox-2 - how to resize video when fancybox resizesfancybox-2 中的响应式 vimeo - 当 fancybox 调整大小时如何调整视频大小
【发布时间】：2013-12-04 14:59:20
【问题描述】：

在调整窗口大小时，我无法让 vimeo 嵌入式 iframe 正确调整大小，使用 fancybox (http://fancyapps.com/fancybox/)

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

但是，重新调整窗口大小，fancybox 和视频一样保持不变。

见这里：http://jsfiddle.net/prng9/1/ - 将结果框架缩小然后备份（说实话，缩小的大小也不完美 - 如果有人有更好的方法，请告诉我 - 代码基于此：@ 987654323@)

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

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 代码的原因 - 这模拟了相同的环境。

谢谢。

【问题讨论】：

为什么你不简单地使用fancybox媒体助手？ fancyapps.com/fancybox/#examples vimeo 示例（媒体助手）完全响应，没有进一步的复杂性
要使用 fancybox 媒体助手，我需要链接到 vimeo.com/[video_id]，这将 A. 向公众公开链接 B. 如果 JS 未启用，则打开 vimeo 页面.这两个我都不想做。视频需要嵌入到我的网站中，因为对视频有一定的访问控制 - 它们不是免费提供的。
您在 htmlcontent 变量中暴露了视频 ID。
我知道，这只是一个松散的访问控制——并不是万无一失的，因为它不是关键任务:)

标签： jquery fancybox fancybox-2 vimeo

【解决方案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

【讨论】：

【解决方案2】：

JFK 的回答让我有了不同的想法，我找到了一种方法 - 在 <a> 的 href 中设置指向现场嵌入视频的链接，并在此元素中添加一个数据值，其中包含指向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 视频 - 他们将“看到”嵌入的视频链接（例如，如果右键单击 > 复制链接地址或在新选项卡中打开）。

这正是我需要的行为。

当然，正如 JFK 指出的那样，这并不是万无一失的——他们仍然可以在代码中看到 vimeo 链接，但如果有人想搜索代码，欢迎访问。

看这里http://jsfiddle.net/BHfv8/

【讨论】：

好吧，这并没有回答你原来的问题，即how to resize video when fancybox resizes
此答案符合原始问题中所述的所有要求。您必须阅读整个问题才能给出完整答案。