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

Question

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

首先，720p视频显示水平黑条，因为默认width和height参数为800 x 600。

将width和height更改为1280 x 720会导致我的4：3视频出现垂直黑条。

将width和height设置为'auto'会因某种原因将视频缩小为缩略图的大小。 （也许这是我问题的关键？）

最后，根据类似主题的建议，我补充说：

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

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

看起来它正在读取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.
});

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

谢谢！

Answer 1

我太近了！从我的帖子开始：

  

此时我尝试添加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");
    }
});
});