获取YouTube视频尺寸（宽度/高度）

Question

我试图完成的是将视频完全适应播放器；播放器宽度是固定的，因此我只需要原始尺寸或至少比例。

有任何方法可以使用YouTube API检索此类数据？

（我的后备计划是将播放器的大小设置为4/3，并且永远不要看回去，但是任何帮助都将受到赞赏！）

由于YouTube的实施实现，您也可以得到它。示例：

Https：//www.youtube.com/oembed？url = https：//www.youtube.com/watch？v = huvbb_eup84＆format＆format =xml

format=json

Answer 1

Update2017-被接受的答案不再有效

如果您想从一个问题中获得示例视频的尺寸：

https：//www.youtube.com/watch？v =z_abfpxtkms

Answer 2

然后尝试使用此URL，使用

Noembed

：

• https：//noembed.com/embed？url = https％3A％2f％2fwww.youtube.com％2fwatch％3fv％3DZ_ABFPXTKMS

它将返回以下JSON：

{
  "version": "1.0",
  "title": "まるです。",
  "author_name": "mugumogu",
  "provider_url": "https://www.youtube.com/",
  "width": 459,
  "height": 344,
  "thumbnail_height": 360,
  "type": "video",
  "thumbnail_width": 480,
  "provider_name": "YouTube",
  "url": "https://www.youtube.com/watch?v=z_AbfPXTKms",
  "author_url": "https://www.youtube.com/user/mugumogu",
  "html": "\n<iframe width=\" 459\" height=\"344\" src=\"https://www.youtube.com/embed/z_AbfPXTKms?feature=oembed\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"></iframe>\n",
  "thumbnail_url": "https://i.ytimg.com/vi/z_AbfPXTKms/hqdefault.jpg"
}

它还支持JSONP进行交叉启用请求：

• https：//noembed.com/embed？callback = example＆url = https％3A％2f％2fwwwww.youtube.com％2fwatch％3fv％3DZ_ABFPXTKMS

有关更多信息，请参阅此答案：

通过JSON获取YouTube信息，以获取单个视频（不是feed）JavaScript

• demo
使用jQuery的简单演示：

var id = 'z_AbfPXTKms';
var url = 'https://www.youtube.com/watch?v=' + id;

$.getJSON('https://noembed.com/embed',
    {format: 'json', url: url}, function (data) {
    alert('Dimensions: ' + data.width + 'x' + data.height);
});

在Jsbin上看到
• demo
。

现在有一个解决方案：如果您刮擦视频公共页面：

http：//www.youtube.com/watch？v = [id]

您可以看到开放的图形宽度和高度标签，例如：

<meta property="og:video:width" content="1920">
<meta property="og:video:height" content="1080">

因此，您可以在那里获得尺寸;-)

Answer 3

从Isra的解决方案中遵循。 是的，当VideoFramesize返回470 x 270 PX时，YouTube确实没有开发其启用API代码。 但至少它给您一些动态抓住的东西！

用吮吸效果看到“李·泰勒（Lee Taylor）”提出的方法是实现这一目标的一种吻，但如果您需要动态内容，则不是理想的选择。 ok-牢记oembed提供的不准确的尺寸 - 它确实提供了解决方案。 我目前正在开发一个与YouTube视频链接的画廊上的coltustureddata生成器。 这里是从YouTube获取维度的一种不准确的方法，但至少其数据！

如何从YouTube获取视频尺寸。 阶段1：

从YouTube拨打oembed数据::

Answer 4

阶段2：

    $data['height'] = $oEmbed->height;
    $data['width']  = $oEmbed->width;

    $data['videoFrameSize'] = $oEmbed->height . "x" . $oEmbed->width . "px";

阶段3：

最好使用编码中的变量，因为您最好使用::

如果您加载这样的YouTube视频，则只有在加载视频后才能触发JavaScript功能。

<script src="https://www.youtube.com/iframe_api"></script>
    <center>
        <div class="videoWrapper">
           <div id="player"></div>
        </div>
    </center>
<script>
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            videoId:'xxxxxxxxxxx',playerVars: {  controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' }
        } );
        resizeHeroVideo();
    }
</script>

resizeHeroVideo在加载视频后被调用。

var player = null;
$( document ).ready(function() {
    resizeHeroVideo();
} );

$(window).resize(function() {
    resizeHeroVideo();
});

function resizeHeroVideo() {
    var content = $('#hero');
    var contentH = viewportSize.getHeight();
    contentH -= 158;
    content.css('height',contentH);

    if(player != null) {
        var iframe = $('.videoWrapper iframe');
        var iframeH = contentH - 150;
        if (isMobile) {
            iframeH = 163; 
        }
        iframe.css('height',iframeH);
        var iframeW = iframeH/9 * 16;
        iframe.css('width',iframeW);
    }
}

然后我们计算尺寸以保持其位于页面中心的位置，以遵循适当的16：9纵横比。

complete gittetos.

live示例此处。

YouTube数据API和YouTube嵌入数据无法提供实际的视频框架宽度和高度。相反，他们返回旨在适应任何媒体大小的通用值，如果您正在寻找精确的视频尺寸，则使其有用。

，但是，有一种可靠的方法可以访问此隐藏数据！

当YouTube嵌入式播放器开始播放视频时，它会计算并揭示确切的视频框架尺寸。这使您可以检索准确的宽度和高度值。这是一个简洁的示例，演示了如何在玩家的初始化期间使用此功能：

Answer 5

<div id="player"></div>
<script src="https://www.youtube.com/iframe_api"></script>

<script>
        function onPlayerStateChange(event) {
            if (!event.target.videoContentRect && event.data === 1 && event.target.playerInfo.videoContentRect) {
                event.target.videoContentRect = event.target.playerInfo.videoContentRect;
                if (!event.target.options.playerVars.autoplay) event.target.stopVideo();
                event.target.unMute();
                event.target.setSize(event.target.videoContentRect.width, event.target.videoContentRect.height);
            }
        }
        function onPlayerReady(event) {
          event.target.mute();
          event.target.seekTo(0);
        }

        function onYouTubeIframeAPIReady() {
          var player = new YT.Player('player', {
              width: 368,
              height: 207,
              videoId: '_xKCwzgI68s',
              playerVars: {
                autoplay: 1,
                rel: 0,
                playsinline: 1,
                controls: 0,
              },
              events: {
                  onReady: onPlayerReady,
                  onStateChange: onPlayerStateChange,
              }
          });
        }
</script>