YouTube 嵌入的动态高度？答案

【问题标题】：Dynamic height on YouTube embed?YouTube 嵌入的动态高度？
【发布时间】：2012-08-09 13:54:34
【问题描述】：

在我的网站上，我有一个静态宽度的嵌入式无铬 YouTube 播放器 (iframe)，可以播放用户选择的视频。它运行良好，但有一点小烦恼：它的高度对视频没有反应；电影超宽屏视频有水平黑条，老式 4:3 视频有垂直黑条。

是否有一个相当简单的解决方案可以让播放器根据正在播放的视频调整其高度？谷歌揭示的所有内容都是流畅布局网站的脚本（我的不是）。 Javascript、Coffeescript 和 Jquery 解决方案都可以接受。

【问题讨论】：

gist.github.com/dcondrey/647fcdda17cd23715872

标签： html youtube aspect-ratio

【解决方案1】：

为了实现您的预期行为，您需要了解视频的宽高比。您可以使用 YouTube 提供的 API 轻松做到这一点。首先，要获取 JSON 格式的视频信息，您可以获取以下形式的 URL：

https://gdata.youtube.com/feeds/api/videos/video_id?v=2&prettyprint=true&alt=json

video_id 是您要嵌入的视频的 ID（请注意，“prettyprint”只是使其易于阅读——在实际应用程序中将其删除以节省带宽）。我们关心的属性是entry.media$group.yt$aspectRatio.$t。当视频为 16:9 时，该属性设置为“宽屏”，如果为 4:3，则未定义。因此，您可以轻松检查该值并相应地调整 <iframe> 的大小。

这是一个示例：
HTML：

<iframe id = "vid" width="500" src="http://www.youtube.com/embed/ni9RS4pgRXA" frameborder="0" allowfullscreen></iframe>

（这里的宽度是 500 -- 当然，它可以是任何你想要的）。

JavaScript（使用 jQuery，但不是必须的）：

$.getJSON("https://gdata.youtube.com/feeds/api/videos/ni9RS4pgRXA?v=2&alt=json",
function(data) {
            var obj = $("#vid");
            var asp = data.entry.media$group.yt$aspectRatio.$t;
            console.log("Aspect Ratio is", asp); //Debugging line. "undefined" if video is 4:3.
            if(asp == "widescreen") {
                obj.height((Math.floor(obj.width() * 9 / 16)));
            }
            else {
                obj.height((Math.floor(obj.width() * 3 / 4)));
            }
        });

在这里 (link) 您可以找到一个带有示例 16:9 视频的工作演示。 Javascript 代码非常简单，但如果有任何含糊之处，请告诉我，以便我更详细地解释。

【讨论】：