如何使用JS iframe API获取YouTube视频的实际尺寸（即无黑条）？

I need to know the actual width and height of a YouTube video embedded in my website. Here's a crude illustration.

我需要知道网站中嵌入的YouTube视频的实际宽度和高度。这是一个粗略的例子。

I've searched through the API docs and I haven't found a way to do this. I've noticed the player variable contains a method called showVideoInfo() which overlays exactly the data I want on the video player... but unfortunately since it is in the iframe I'm unable to access it from JavaScript.

我搜索过API文档,但我还没有找到办法。我注意到播放器变量包含一个名为showVideoInfo()的方法,它完全覆盖了我想要的视频播放器数据......但不幸的是,因为它在iframe中我无法从JavaScript访问它。

Is there any way to do this without having a backend script that queries the JSON API? Because I'd seriously rather not have to do that.

有没有办法在没有查询JSON API的后端脚本的情况下执行此操作?因为我认真而不是必须这样做。

1 个解决方案

#1

Fiddle

As I understand, this is what you want? Ignore I'm writing, the dimensions, It's onlye to let you know actual dimensions

据我所知,这就是你想要的?忽略我写的是尺寸,它只是让你知道实际的尺寸

    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>