How to get YouTube video aspect ratio - javascript

I'd like to get the aspect ratio of a YouTube video, to resize the player accordingly. I'm programming the YT player using JavaScript.

I would suggest hitting the oembed url:
https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v={videoID}&format=json
This gives you the exact video dimensions for videos that are public. I'm not sure about private videos though. It will also return thumbnail dimensions, which seem to be different im some cases, so just be sure to not mix them up.

The only place that exact video dimensions are exposed in a Data API call is when you make a videos.list(part=fileDetails, id=VIDEO_ID) call using the v3 API, while authenticated as the owner of the video. It's returned in the video.fileDetails.videoStreams[].aspectRatio property. This isn't particularly useful, since you need to be authenticated as the video's owner in order to get that info.
If you just have a webpage, and want to make a JSONP call to get a hint about whether a given video is 16:9 or 4:3, you can do that via something like
http://gdata.youtube.com/feeds/api/videos/VIDEO_ID?v=2&alt=jsonc&callback=myCallback
E.g.
http://gdata.youtube.com/feeds/api/videos/F1IVb2_FYxQ?v=2&alt=jsonc&callback=myCallback
has "aspectRatio":"widescreen" set in its response, which is a hint that the video is 16:9 (or close to 16:9).
http://gdata.youtube.com/feeds/api/videos/u1zgFlCw8Aw?v=2&alt=jsonc&callback=myCallback
does not have aspectRatio set at all, which means that the videos is 4:3 (or close to 4:3). It's not always the exact aspect ration, but it's close enough for the vast majority of videos to be useful.

Here is how I do it. I get the aspect ratio from the youtube image.
<img id"nnS7G3Y-IDc-img" src="http://i.ytimg.com/vi/nnS7G3Y-IDc/default.jpg" />
<script>
//using jquery
var height = $('#nnS7G3Y-IDc-img').css('height');
var width = $('#nnS7G3Y-IDc-img').css('width');
height = height.replace('px', '');
width = width.replace('px', '');
var arB = height / 3;
var arT = width / arB;
if (arT == 4) {
//do what you need to with the aspect ratio info from here
//just demonstrating with an alert
alert ("4:3");
}
else {alert ("16:9");}
</script>
I pull all the video information from the youtube api and then store all the video information in a database beforehand, so if you are doing this on the fly, you might have to hide the image on the page and then get the aspect ratio that way.
edit** Another option, and probably the best, would be to use youtube's api.
Search for a video, and check if the data->items->aspectRatio is set. I don't think it's set on 4:3 video, but on 16:9 it is set to widescreen. Should be as simple as if (data->items->aspectRatio) {ratio= "16:9"} else {ratio="4:3"}

Aspect ratio apparently depends on the quality level. Taken from the YouTube Docs:
Quality level small: Player height is 240px, and player dimensions are at least 320px by 240px for 4:3 aspect ratio.
Quality level medium: Player height is 360px, and player dimensions are 640px by 360px (for 16:9 aspect ratio) or 480px by 360px (for 4:3 aspect ratio).
Quality level large: Player height is 480px, and player dimensions are 853px by 480px (for 16:9 aspect ratio) or 640px by 480px (for 4:3 aspect ratio).
Quality level hd720: Player height is 720px, and player dimensions are 1280px by 720px (for 16:9 aspect ratio) or 960px by 720px (for 4:3 aspect ratio).
Quality level hd1080: Player height is 1080px, and player dimensions are 1920px by 1080px (for 16:9 aspect ratio) or 1440px by 1080px (for 4:3 aspect ratio).
Quality level highres: Player height is greater than 1080px, which means that the player's aspect ratio is greater than 1920px by 1080px.

My goal was to get aspect ratio for any video, not only for those for which I'm owner.
Thus the trick is to use https://developers.google.com/youtube/v3/docs/videos/list with player provided in parts and then parsing width and height of returned embed html.

Maybe not a good answer, but there seems to be an assumption amongst other answers that YouTube videos are either 16:9 or 4:3.
But they can have a pretty much arbitrary aspect ratio, and with portrait phone videos having become quite common, it's becoming less of a rarity for a video on YouTube to be something different.
For these non-standard aspect ratios, as a quick manual fudge, I've resorted to playing them in full screen, doing a screen capture, and cropping the image down.
I've put a couple of examples of arbitrary aspect videos at http://youtube-aspect-ratios.xtra.ink.

Related

Multiple aspect ratio adding single video element?

When i started to create the webrtc using videocall app,and i set constraint video object aspectratio at responsive screen orientation purpose
Constrain = video{
aspectratio :Window.width*window.pixelratio/window.height*window.pixelratio
}
This ratio is used for capture the streamed video at responsively in portrait mode.
But i could not modify the UI layout design responsively
I want like this
How to dynamically add the multiple aspect ratio in single video element

aws chime - stretch video tile vertically

Please be informed, we are using aws chime single js sdk to create a chat room. Its working perfectly fine but our dimensions only increase proportionately for example its dimensions only work if it is 400 width and 250 height and not the other way with 400 height and 250 width.
For your information, attaching a image.
This is test video chat room. As you can see, the viewport dimensions is 400 width x 700 height. But the video tile only reaches 400px width and 250px height, which means it is only the quarter of the viewport's dimension. What i want is that tile should fully cover the viewport's dimension to 400w x 700h like the one in whatsapp video chat. We tried changing css dimensions like object-fit:cover, max-height, max-width. Created a wrapper div under video tag, but none of them works for us. Shall appreciate should you give us some clues on this issue.

Azure Media Player square aspect ratio videos fullscreen

Using AMP version 2.0.0, default skin.
I'm trying to play a 1:1 aspect ratio video from my media services account in Azure media player. Doing this using 800/500px width/height caused the video to extend well below the height of the modal window it is playing in. I fixed this issue by setting the height of the video to 500px and the width to auto (when non-fullscreen). This setting works for both 16:9 and 1:1 aspect ratio (it's not ideal, but it does work).
When I fullscreen the video, the width and height are set to 100%, and so half of the video is lost. I would like the video to play with height max and black letterboxing at the sides, as it does in WMP. If I could get the same effect when playing in non-fullscreen that would also be good. If I set the video height to anything other than 100% when the player is fullscreen it just moves the playbar up the screen rather than resizing the video. Anyone have any advice on how to get this working?
As a last resort I would also accept not being able to set the video to fullscreen, but I can't find documentation on how to do that either.
Issue here was a rogue css rule setting the height of all s to 100%

How do I determine the resolution of a computer screen in javascript?

I noticed that the <canvas> element can have different scales. For instance, if I set the CSS width and height to 100px, but have the javascript set the element's width and height to 200px, the element is sized down so everything printed on it is 1/2 the size. (Or 2x the resolution)
I have a retina screen Macbookpro, so in development, I set the scaling to 2x so the images and objects look clear and crisp on my screen.
I have heard that other screens can have a 1.2x resolution (CSS pixels vs Actual pixels)
Is there a way to find out what the resolution/scaling is of the device's screen so I can make my canvas as crisp and as clean as possible to the user?
If it helps at all, I'm trying to make a game in javascript using canvas as my graphics output.
These properties will give your dimensions:
window.screen.availHeight
window.screen.availWidth
For pixel depth, use this property:
window.devicePixelRatio
For application in canvas, a helpful script and explanation is given here.
After searching around using different terms, I was able to find the answer that I was looking for.
The window object has a variable called window.devicePixelRatio. This lets us know the ratio of pixels to the device's screen pixels. On my retina screen, this variable gives me a 2. With this, I can set the canvas to the correct scaling so it looks clean and crisp on any screen.
Source: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

What is the need for aspect ratio?

I am experimenting with html5 JavaScript game engines and Cordova.
Often I encounter key words like aspect ratio and scaling.
Since html5 games deals with canvas and game images are put through the drawImage() i fail to understand the need for aspect ratio while building the games with Cordova.
Is there any good example to understand aspect ratio or scaling?
Aspect ratio
Aspect ratio is what you get when you divide an image's width by the height. It can be written as a single number (2), or as a fraction (2/1) or with a colon 2:1.
A perfect square has an aspex of 1 or 1:1, its height is the same as its width.
If you have a widescreen monitor it will have an aspect of 16:10 or 1.6, your iphone 3:2 or 1.5 and an old TV has 4:3 or 1.3. The closer the number gets to 1 the squarer the image/screen/thing is.
The aspect ratio is size and unit invariant. That means that no matter how large the object is, or what units its measured in, feet, meters, inches or millimeters the aspect is always the same.
If you have the aspect then all you need is the length of one side and you can work out the length of the other size. So if you had a wide screen TV aspect ratio 16:9 or 1.7 and it was as tall as you then you also know that it will be 1.7 times as wide as you if you layed down beside it.
When you resize an image you have to know its aspect ratio or you will squash or stretch the image. For example if you take a widescreen movie (16:9 or 1.7) and make it fit on a old TV (4:3 or 1.3) because the aspect has changed everything will get squashed and look skinny.
Aspect ratio in code.
In javascript an image has a width and height property expressed as pixels. To work our the aspect ratio is easy
var aspect = image.width / image.height;
If you want to make that image fit a region that is 1000 pixels high. You know that the width will be equal to the height times the aspect.
ctx.drawImage(image, 0, 0, 1000 * aspect, 1000);
If you want to fit a 1000 pixel width then you divide the width by the aspect to get the height.
ctx.drawImage(image, 0, 0, 1000, 1000/aspect);
It wont get squashed, circles will still be circles, squares will still be square and skinny people will still look skinny.
A famous aspect ratio is the golden ratio 1.618 or 16:10. It is said to be the most pleasing to look at. Many famous paintings have that aspect from way back, as well as building, sculptures, landscapes and more.
Another well know one, and a very handy aspect ratio is the square root of 2 : 1. it is the aspect ratio of the A0, A1, A2 .. paper and has a property no other aspect ratio has. If you take a A0 sheet of paper and fold it in half then turn it on its side the aspect of the folded sheet is still square root of 2 : 1. Its size is now A1, fold again to get A2, then A3... No mater how often you fold it the aspect still stays the same. It is the only aspect ratio that has that property.
Hope that helped explain what aspects ratios are, what they are used for, and how to use them..

Categories

Resources