javascript - 如何使用JS iframe API获取YouTube视频的实际尺寸(无黑边)？

Question

我需要知道网站中嵌入的YouTube视频的实际宽度和高度。 Here's a crude illustration。

我搜索了API文档，但没有找到一种方法。我注意到player变量包含一个称为showVideoInfo()的方法，该方法将我想要的数据完全覆盖在视频播放器上...但是不幸的是，由于它位于iframe中，因此无法从JavaScript访问它。

没有后端脚本来查询JSON API，有什么方法可以做到这一点？因为我宁愿不要这样做。

Answer 1

Fiddle

据我了解，这就是您想要的吗？忽略尺寸，我只是在告诉您实际尺寸

    var vidWd = $('.videoCont iframe').width();
    var vidHg = $('.videoCont iframe').height();

$(document).ready(function(){
	function getDimension() {
	var vidWd = $('.videoCont iframe').width();
  var vidHg = $('.videoCont iframe').height();
  
  $('.videoCont h1 p').remove();
  $('.videoCont h1 span').remove();
  $('.videoCont h1').append('<p>These are the dimensions:</p><span>' + vidWd + ' Widht - ' + vidHg + ' Height</span>');
}
$(document).ready(getDimension);
$(window).resize(getDimension);
});

.videoCont{
  font-family: sans-serif;
  border: 1px solid #333;
  padding: 5px;
}
.videoCont iframe{
  width: 100%;
}
.videoCont h1 p{
  font-size: 14px;
}
.videoCont h1 span{
  font-size: 15px;
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="videoCont">
  <h1>This is your video:</h1>
  <iframe src="https://www.youtube.com/embed/Aoobcc3DyUs" frameborder="0" allowfullscreen>
  </iframe>
</div>