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();

＆＃13;

$(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);
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: