Html YouTube上的动态高度？

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

---

有没有一个合理简单的解决方案，可以让播放器根据播放的视频调整其高度？所有谷歌展示都是流体布局网站的脚本（我的不是）。Javascript、Coffeescript和Jquery解决方案都是可以接受的。

为了实现您的预期行为，您需要知道视频的纵横比。使用YouTube提供的API可以很容易地做到这一点。首先，要获取JSON格式的视频信息，您可以获得以下形式的URL：

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

其中，video\u id是要嵌入的视频的id（请注意，“prettyprint”只是使其具有可读性——在实际应用程序中删除它以节省带宽）。我们关心的属性是

entry.media$group.yt$aspectRatio.$t

。当视频为16:9时，该属性设置为“宽屏”，如果为4:3，则未定义该属性。因此，您可以轻松地检查该值并相应地调整

的大小

下面是一个例子：
HTML:

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

这里（）您可以找到一个16:9视频示例的工作演示。Javascript代码非常直截了当，但如果有什么含糊不清的地方，请告诉我，以便我可以更详细地解释

$.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)));
            }
        });