如何在响应式花式框中显示没有黑条/适合iframe视频内容的视频?

时间:2013-12-27 18:21:47

标签: jquery video fancybox fancybox-2

我正在使用fancyBox 2.1.5来显示图像和Vimeo剪辑。我的视频并不都具有相同的宽高比。

首先,720p视频显示水平黑条,因为默认widthheight参数为800 x 600。

widthheight更改为1280 x 720会导致我的4:3视频出现垂直黑条。

widthheight设置为'auto'会因某种原因将视频缩小为缩略图的大小。 (也许这是我问题的关键?)

最后,根据类似主题的建议,我补充说:

afterLoad: function() {
    this.width = $(this.element).data("width");
    this.height = $(this.element).data("height");
}

..在我的显示器上看起来非常适合全分辨率的所有视频,但在移动设备上我得到了这个:

Black Bars on Mobile

看起来它正在读取1280 x 720的视频分辨率,并且无法在移动屏幕上进行调整。此时我尝试添加aspectRatio: 'true'无效。

这是我当前的文档就绪块,以防它有用。

$('.fancybox').fancybox({
    helpers: {
        media: {}, // Enable the media helper to better handle video.
        title: {
            type: 'inside'
        } // Put comments within the white border.
    },
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
    }, // Change the title keyword to 'caption' to avoid title text in tooltips.
    fitToView: false, // Prevent shrinking media to fit title text.
    maxWidth: "100%", // Prevent media from extending past borders with fitToView off.
    afterLoad: function() {
        this.width = $(this.element).data("width");
        this.height = $(this.element).data("height");
    } // Use each element's width and height data attributes to size the iframe.
});

我真的只想显示像图像这样的视频默认工作。缩小以适应(如果需要),保持纵横比,没有黑条等。这可能吗?

谢谢!

1 个答案:

答案 0 :(得分:3)

我太近了!从我的帖子开始:

  

此时我尝试添加aspectRatio: 'true'无济于事。

布尔值不应该使用引号,因此由于语法不正确而无效!删除引号会成功将iframe调整为适当的尺寸,从而防止黑条出现在移动设备上。

所以,我的最终工作代码是将视频内容放到显示区域,同时忽略标题文本,在响应式网站上没有引入黑条,是:

<a class="fancybox fitVideo" data-width="800" data-height="450"
caption="Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>"
href="https://vimeo.com/81471924">
<img src="http://placehold.it/200x200">
</a>

确保您的宽度和高度与视频的尺寸相匹配。下一个:

$(document).ready(function() {
// Fit video content to display area, ignoring title text.
$('.fitVideo').fancybox({
    helpers: {

        // Enable the media helper to better handle video.
        media: true,

        // Put comments within the white border.
        title: {
            type: 'inside'
        }
    },

    // Do not use this because it tries to fit title text as well.
    fitToView: false,

    // Prevent the introduction of black bars when resized for mobile.
    aspectRatio: true,

    // Restrict content to the display dimensions.
    maxWidth: "100%",
    maxHeight: "100%",

    // Change the title keyword to 'caption' to avoid title text in tooltips.
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
    },

    // Override the default iframe dimensions with manually set dimensions.
    afterLoad: function() {
        this.width = $(this.element).data("width");
        this.height = $(this.element).data("height");
    }
});
});