Search code examples
javascriptyoutubeyoutube-data-apiyoutube-javascript-api

YouTube API, Video Dimensions or Aspect Ratio

Lots of words here, so TL;DR I'm looking for a way to get the width and height of any given YouTube video.

I'm having the absolute hardest time getting correct video resolutions/aspect ratios from YouTube videos using the YouTube API. Long story short, I need a user-selected video to fill a container completely for use as a background video that content will be hovering over--in order to do this while losing the least amount of the video to overflow, I need to know the dimensions of the video so I can scale it up and center is properly.

I have fiddled with the OAuth Playground plenty (you'll probably also want to look at the YouTube Data API), but can't seem to find anything that actually gives me the dimensions of the video. The closest thing that I can find which is correct for SOME videos, but not all, is doing a GET with https://www.googleapis.com/youtube/v3/videos?part=player&id=XJK_uVyTBHc . part=player spits back with lots of stuff I don't want, plus some HTML for the embeded iframe video. The iframe tag contains a width and height, but these are not always correct.

For example, the video with ID XJK_uVyTBHc returns an iframe with width="480" and height="360", but when viewing on YouTube it shows my Viewport as 406x722px with the current and optimal resolution as 608x1080px, which are roughly the same aspect ratio (right click video, choose stats for nerds to see this). I haven't done very extensive testing, but can confirm that at the very least videos with 1920x1080px resolutions DO come back with an iframe tag that has the correct aspect ratio on the width and height attributes. I assume this is due to minimum heights and widths necessary for the YouTube controls to fit inside the video, but that doesn't help with my problem! :[

So, here we are in 2019... Is there still no good way to fetch the width and height of a YouTube video with a simple API call? Have I overlooked a particular API operation somewhere? Any help or additional resources would be greatly appreciated!

Solution

  • If you see the source code of the video you provided - videoId: XJK_uVyTBHc:

    view-source:https://www.youtube.com/watch?v=XJK_uVyTBHc

    You'll see a segment of code like this: 

    fmt_list":"22\/406x720...

    I think this is value you're looking for. As you mentioned, the API returns the iframe and those values aren't the same as shown in the YouTube website.

    Making more tests, I just selected a few random videos and get the iframe "with the settings offered by YouTube" - "by clicking the (share) button > insert video":

    Microsoft Windows Mixed Reality update | October 2018:    
<iframe width="560" height="315" src="https://www.youtube.com/embed/00vnln25HBg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Test Video Please Ignore - this is your sample video:    
<iframe width="560" height="315" src="https://www.youtube.com/embed/XJK_uVyTBHc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The Rasmus - In the Shadows [Crow Version] (Official Video):    
<iframe width="560" height="315" src="https://www.youtube.com/embed/7gwO8-oqwFw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Super Street Fighter IV Hakan Trailer:    
<iframe width="560" height="315" src="https://www.youtube.com/embed/m6uxFzaB4sE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>    

lofi hip hop radio - beats to relax/study to:    
<iframe width="560" height="315" src="https://www.youtube.com/embed/hHW1oY26kxQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    All previous iframes have the same width and height: width="560" and height="315".

    I used Google API Explorer for create a demo with the videoIds from the above iframes for retrieve these results:

    {
 "items": [
  {
   "snippet": {
    "title": "Microsoft Windows Mixed Reality update | October 2018"
   },
   "contentDetails": {
    "dimension": "2d"
   },
   "player": {
    "embedHtml": "<iframe width=\"480\" height=\"270\" src=\"//www.youtube.com/embed/00vnln25HBg\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
   }
  },
  {
   "snippet": {
    "title": "Test Video Please Ignore"
   },
   "contentDetails": {
    "dimension": "2d"
   },
   "player": {
    "embedHtml": "<iframe width=\"480\" height=\"360\" src=\"//www.youtube.com/embed/XJK_uVyTBHc\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
   }
  },
  {
   "snippet": {
    "title": "The Rasmus - In the Shadows [Crow Version] (Official Video)"
   },
   "contentDetails": {
    "dimension": "2d"
   },
   "player": {
    "embedHtml": "<iframe width=\"480\" height=\"360\" src=\"//www.youtube.com/embed/7gwO8-oqwFw\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
   }
  },
  {
   "snippet": {
    "title": "Super Street Fighter IV Hakan Trailer"
   },
   "contentDetails": {
    "dimension": "2d"
   },
   "player": {
    "embedHtml": "<iframe width=\"480\" height=\"270\" src=\"//www.youtube.com/embed/m6uxFzaB4sE\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
   }
  },
  {
   "snippet": {
    "title": "lofi hip hop radio - beats to relax/study to"
   },
   "contentDetails": {
    "dimension": "2d"
   },
   "player": {
    "embedHtml": "<iframe width=\"480\" height=\"270\" src=\"//www.youtube.com/embed/hHW1oY26kxQ\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
   }
  }
 ]
}

    All previous results from the YouTube Data API vary its width and height values as follows:

    • width="480" and height="270".
    • width="480" and height="360".

    Same results are available in this "try-it" demo I prepared for you.

    I noticed also that "embedWidth" and "embedHeight" aren't returned - maybe such fields are deprecated, but I couldn't find any documentation about it.

    Unfortunately, YouTube Data API is kind of limited for certain tasks - like this one.

    Edit (26/10/2019): Thanks to mtkopone's comment:

    embedWidth or embedHeight is returned if you specify maxWidth or maxHeight as a query parameter to the videos:list request.