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 vi

Answer 1

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

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

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 4

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 5

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.