Get YouTube Video dimensions (width/height)

Question

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

Answer 1

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.

Answer 2

Update 2017 - The accepted answer no longer works

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

• https://www.youtube.com/watch?v=z_AbfPXTKms

Then try this URL, using Noembed:

• https://noembed.com/embed?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dz_AbfPXTKms

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:

• https://noembed.com/embed?callback=example&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dz_AbfPXTKms

For more info see this answer:

• Get Youtube information via JSON for single video (not feed) in Javascript

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.

Answer 3

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

Answer 4

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.

Answer 5

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