YouTube嵌入时的动态高度？

Question

在我的网站上,我有一个静态宽度嵌入式无边框YouTube播放器(iframe),用于播放用户选择的视频.它运作良好,但有一点烦恼:它的高度不响应视频; 电影超宽屏视频有水平黑条,旧式4:3视频有垂直黑条.

是否有一个相当简单的解决方案,可以让玩家根据正在播放的视频调整其高度？所有谷歌都揭示了流体布局网站的脚本(我的不是).Javascript,Coffeescript和Jquery解决方案都是可以接受的.

Answer 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)));
            }
        });

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