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%
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 I want to is set <body> to be 100% width and height (or viewport width / height), but when the user zooms, either via pinching on mobile or numerous methods on a desktop browser, I want the viewport to scale with the zoom. So where as body used to be the size of the viewport, if you zoom in 2x, I want the viewport to be 2x bigger.
One possible solution would be to measure the viewport in javascript on load and then set body to be those dimensions, then it would scale the way I desire. I could then put more hooks into viewport resizing to get it to appear the correct size, but it'd be nicer if there was a css / html solution, even if it doesn't necessarily work on all browsers.
How to set screen resolution for all screens like desktop, laptop, etc,. in parallax movement.
I am currently working on a parallax website. I have a problem to set the screen resolution for all screens. I want to put several images in the background. The width of every image is 5212px.
You want to set the width of the images as a percentage rather than a width. If you set the width to 100% rather than 5212px for example then no matter how much you zoom in or out and resize the window the image will always be 100% of the window size.
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.