如何在不带黑条的情况下显示视频/在响应式fancyBox中使iframe适应视频内容？

calbar 发表于 Dev

卡巴

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

最初，由于默认width和height参数为800 x 600，因此以水平黑条显示720p视频。

改变width和height1280×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.
});

我真的只想显示默认情况下像图像一样的视频。缩小以适合（如果需要），保持宽高比，没有黑条等。这可能吗？

谢谢！

卡巴

我好近！从我最初的帖子：

在这一点上，我尝试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");
    }
});
});