CODEWITHSUNDEEP
videoyoutube-api
Minkiele
Minkiele

Reputation: 1280

Get YouTube Video dimensions (width/height)

I’m trying to get the size of a YouTube video. I’m using a Gdata API call to retrieve the basic informations (title, URLs, thumbnails and categories) but I can’t find the video dimensions.

I’m embedding some videos on a website using YouTube Data API server-side calls like this: http://gdata.youtube.com/feeds/api/videos/z_AbfPXTKms?0=v&1=2&alt=json. Unfortunately, there is no reliable information on video dimensions (all the preview images are in 4/3 rate even with widescreen videos).

What I am trying to accomplish is to fit the video exactly into the player; the player width is fixed, so I just need the original dimensions or at least the proportion.

Is there any way to retrieve this kind of data with the Youtube API?

(My fallback plan is to set the player size to 4/3 and never watch back, but any help is appreciated!)

Upvotes: 19

Views: 42149

Answers (6)

350D
350D

Reputation: 11449

The YouTube Data API and YouTube embed data don’t provide the actual video frame width and height. Instead, they return universal values designed to adapt to any media size, making them less useful if you’re looking for precise video dimensions.

However, there is a reliable way to access this hidden data!

When the YouTube embed player starts playing a video, it calculates and exposes the exact video frame size. This allows you to retrieve accurate width and height values. Here’s a concise example demonstrating how to use this feature during the player’s initialization:

<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();
                if (!event.target.options.playerVars.muted) 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,
                muted: 1
              },
              events: {
                  onReady: onPlayerReady,
                  onStateChange: onPlayerStateChange,
              }
          });
        }
</script>

Upvotes: 0

Isra
Isra

Reputation: 630

You can also get it thanks to the oEmbed implementation of YouTube. Example:

https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=hUvbb_eUP84&format=xml

format=json is also accepted.

Upvotes: 12

davidcondrey
davidcondrey

Reputation: 36023

If you load the youtube video like this, you can trigger a javascript function only after the video has loaded.

<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 is called after the video is loaded.

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

and then we calculate the sizes to maintain it's position in the center of the page adhering to the appropriate 16:9 aspect ratio.

Complete gist here. Live example here.

Upvotes: 3

rsp
rsp

Reputation: 111496

Update 2017 - The accepted answer no longer works

If you want to get dimensions for the example video from the question:

Then try this URL, using Noembed:

It will return the following 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"
}

It also supports JSONP for cross-origin requests:

For more info see this answer:

Demo

A simple demo using 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);
});

See DEMO on JSBin.

Upvotes: 10

madesignUK
madesignUK

Reputation: 71

Following on from Isra's solution. Yes it does seem that youtube hasn't developed their oEmbed API code as the videoFrameSize returns 470 x 270 px. But least it gives you something to GRAB hold of dynamically!

Using the suck it ans see method that 'Lee taylor' put forward is a KISS way of achieving this, but not ideal if you need a dynamic content.

OK - bearing in mind the inaccurate dimensions provided by oEmbed - it does provide a solution.

I am currently developing a strusturedData generator for video content on a gallery all linked to youTube videos.

Here is an inaccurate way of getting a Dimension from youtube, but least its data!

How to get the video size from youtube.

Stage 1: Call the oEmbed data from youtube::

$video_id = "your youtube videos unique ID number ";

$oEmbed         = simplexml_load_file('http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v=' . $video_id . '&format=xml');

Stage 2:

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

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

Stage 3:

use the variables in your coding as you feel best to use::

Upvotes: 3

Isra
Isra

Reputation: 630

There is a solution right now: if you scrape the video public page:

http://www.youtube.com/watch?v=[id]

you can see the open graph width and height tags, for example:

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

So you can get the dimensions there ;-)

Upvotes: 8

Related Questions