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

在使用fancybox调整窗口大小时，我无法使嵌入vimeo的iframe正确调整大小(http://fancyapps.com/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代码的原因是——这模拟了相同的环境。

谢谢。

如果您已经将视频包装在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

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/

相关内容

最新更新

热门标签：