YouTube上的動態高度嵌入？

在我的網站上，我有一個靜態寬度嵌入式無鉻YouTube播放器（iframe），播放用戶選擇的視頻。它運行良好，但有一點煩惱：它的高度不響應視頻;電影超寬屏視頻具有水平黑條，舊式4：3視頻具有垂直黑條。YouTube上的動態高度嵌入？

是否有一個相當簡單的解決方案，可以讓玩家根據它所播放的視頻來調整其高度？所有Google揭示的是流體佈局網站的腳本（我不知道）。 Javascript，Coffeescript和Jquery解決方案都是可以接受的。

2012-08-13 John Wells

https://gist.github.com/dcondrey/647fcdda17cd23715872 – davidcondrey 2014-10-05 00:08:26

爲了達到預期的行爲，您需要知道視頻的寬高比。您可以使用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代碼非常簡單，但如果任何內容模糊，請告訴我，以便我可以更詳細地解釋。

來源

2012-08-13 12:47:13 Chris

YouTube上的動態高度嵌入？

回答

相關問題