使用 video.js 保持 youtube 视频的纵横比

【问题标题】：Maintain apect ratio of youtube video using video.js使用 video.js 保持 youtube 视频的纵横比
【发布时间】：2013-12-29 01:33:55
【问题描述】：

我正在使用 html5 视频标签来播放 youtube 视频。我正面临纵横比的问题。我无法从 youtube 视频中删除黑条。

> <video id="vjs-youtube" height="385" width="710" class="video-js
> vjs-default-skin" preload="auto" poster=""  x-webkit-airplay="allow"
> data-setup='{"techOrder":"youtube","html5"],"ytcontrols":false}'>
> <source src="http://www.youtube.com/watch?v=4BS-PEEAgNk"
> type="video/youtube"></source> </video>

感谢任何建议，

【问题讨论】：

标签： css html youtube youtube-api

【解决方案1】：

试试这个，

HTML

 <video id="discovery" src="discovery.mp4"></video>

JavaScript

  var videoelement = document.getElementById("discovery");
  videoelement.videoHeight; // returns the intrinsic height of the video
  videoelement.videoWidth; // returns the intrinsic width of the video

来源（HTML5 规范）：http://www.w3.org/TR/html5/video.html#video

然后您可以通过将宽度除以高度来计算纵横比。

我希望这会有所帮助。

【讨论】：