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
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.
I've just read a nice article on viewport which left me with a couple questions regarding Visual viewport vs Layout viewport on mobile devices.
the width and the height of the layout viewport are equal to whatever
can be shown on the screen in the maximally zoomed-out mode
I did not quite understand what that means. When they say "maximally zoomed-out mode", does that mean that the layout viewport is different for different HTMLs (and not specific to different devices like iPad, Xoom, etc)?
Secondly, I've created a demo page to measure these two viewports. (Please view this on an iPhone/iPad to get the correct values.)
I understand that the layout viewport can be changed by setting the meta viewport tag, but that also changes the visual viewport--why is that? It says that the visual viewport is the part of the page that’s currently shown on-screen, so my understanding was that the visual viewport should not be affected by the meta viewport setting.
Both the layout viewport and visual viewport are measured in CSS pixels. This is an important distinction to make. As opposed to the physical pixels on the device, CSS pixels are used to keep dimensions of the content relatively constant and controlled, and the device then translates CSS pixels into device pixels.
Understanding the difference between CSS pixels and device pixels may assist in the understanding and answering of your questions.
The layout viewport's dimensions are effectively the initial dimensions of the content (in CSS pixels).
The layout viewport is used to best determine how to position and render the content initially. It is independent of the device's zoom level. By saying "...whatever can be shown on the screen in the maximally zoomed-out mode", I think he's alluding to the point that the layout viewport's dimensions are unchanging; it will always be the same size, irrespective of the current visual viewport.
The visual viewport is just the viewable area of the page -- again, in CSS pixels. If you zoom in on a page, you're increasing the size of the CSS pixels, which naturally reduces the number of CSS pixels that can fit on the device. That's why the visual viewport's dimensions shrink when you zoom.
The visual viewport cannot be any larger than the content on the page.
The content's dimensions are largely dictated by the layout viewport.
The layout viewport's dimensions are set by the meta-viewport rule.
Therefore, the visual viewport's dimensions should change in reaction to changes in the meta-viewport rule.
You have since asked (in comments):
Why is it that when there's content that's explicitly wider than the layout viewport, the visual viewport is stretching to fit all of that in? Shouldn't there be a scrollbar?
No, because you're only indicating to the browser what the initial dimensions of the layout viewport should be, not the visual viewport.
If you want the visual viewport's dimensions to not adjust to the full width of the content on page load, set the initial-scale=1 property inside the meta-viewport declaration.
There's a fantastic read over on the Mozilla Dev Centre about the viewport meta tag: https://developer.mozilla.org/en/mobile/viewport_meta_tag
Hi There: Are any of you aware of a method for taking the vimeo embed code and making it scale to 100% of a page? Here is an example of what I'm looking to do.
http://player.vimeo.com/video/4643702
Please let me know!
Thanks
Setting width="100%" will set your height to something smaller that you want in most cases. And setting height="100%" will not preserve your aspect ratio.
What I suggest you do:
set position of to fixed or absolute (see what suites you the most)
set width and height of to the same as video file is
use JS or jQuery on document.ready to set aspect ratio for using
his attributes width and height
set it's width to 100% of the screen
set it's height to width that multiplies aspect ratio from above
handel window.resize event, because maybe in some cases width will be smallet than height so you must set height to 100% and recalculate the width
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.