在我的網站上,我有一個靜態寬度嵌入式無鉻YouTube播放器(iframe),播放用戶選擇的視頻。它運行良好,但有一點煩惱:它的高度不響應視頻;電影超寬屏視頻具有水平黑條,舊式4:3視頻具有垂直黑條。YouTube上的動態高度嵌入?
是否有一個相當簡單的解決方案,可以讓玩家根據它所播放的視頻來調整其高度?所有Google揭示的是流體佈局網站的腳本(我不知道)。 Javascript,Coffeescript和Jquery解決方案都是可以接受的。
在我的網站上,我有一個靜態寬度嵌入式無鉻YouTube播放器(iframe),播放用戶選擇的視頻。它運行良好,但有一點煩惱:它的高度不響應視頻;電影超寬屏視頻具有水平黑條,舊式4:3視頻具有垂直黑條。YouTube上的動態高度嵌入?
是否有一個相當簡單的解決方案,可以讓玩家根據它所播放的視頻來調整其高度?所有Google揭示的是流體佈局網站的腳本(我不知道)。 Javascript,Coffeescript和Jquery解決方案都是可以接受的。
爲了達到預期的行爲,您需要知道視頻的寬高比。您可以使用YouTube提供的API輕鬆完成此操作。首先,搶JSON格式的視頻信息,你會得到這種形式的網址:
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,則該屬性未定義。因此,您可以輕鬆檢查該值並相應地調整您的。
下面是一個例子:
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代碼非常簡單,但如果任何內容模糊,請告訴我,以便我可以更詳細地解釋。
https://gist.github.com/dcondrey/647fcdda17cd23715872 – davidcondrey 2014-10-05 00:08:26