jquery - 如何在响应式 fancyBox 中显示没有黑条的视频/使 iframe 适合视频内容？

Question

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

最初，720p 视频显示时带有水平黑条，因为默认的宽度和高度参数为 800 x 600。

将宽度和高度更改为1280 x 720会导致我的4:3视频出现垂直黑条。

由于某种原因，将宽度和高度设置为'auto'会将视频缩小到缩略图的大小。 (也许这就是我问题的关键？)

最后，遵循我添加的类似主题的建议:

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

..这对于我的显示器上的所有全分辨率视频来说看起来都很完美，但在移动设备上我得到了这个:

看起来它正在读取 1280 x 720 的视频分辨率，但无法将其安装到移动屏幕上。此时我尝试添加 aspectRatio: 'true' 但无济于事。

这是我当前的文档准备 block ，以防有帮助。

$('.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

我已经很接近了!从我最初的帖子:

At this point I tried adding aspectRatio: 'true' to no avail.

bool 值不应使用引号，因此由于语法不正确，这不起作用!删除引号成功地将 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");
    }
});
});