I've been searching for an answer for this problem for too long but no such luck!
I want to be able to embed a YouTube video, and if the viewport changes either in height or width the video will change in size whilst keeping the correct aspect ratio, is this possible?
I'm aware of other solutions such as fit vid and the padding-bottom method, but none of these recalculate the aspect ratio if the height of the viewport was to change.
Any ideas welcome, js or css...
Thanks!
Certainly.
Using JavaScript, detect the viewport dimensions and video dimensions (and aspect ratio) during init() as a baseline. While you're there, set up a handler for the window.onorientationchange event (which will pick up resizes).
In your handler, which axis has changed size. Resize your video (retaining the original aspect ratio) to fit within that dimension, and doublecheck to be sure the other axis isn't now oversized.
If it is, resize it a second time.
Related
I'm trying to understand what is the math behind video stretching on page.
As you can see in these screenshots video becomes wider or narrower based on screen width & height changes.
I want to know what mathematical formula is used here and how screen resolution affects video height and width.
The video is either touching the left and right borders, or the top and bottom borders. The watershed between these two cases is when it touches all four borders. When does it happen? It happens when the aspect ratio of the video and of the window is the same. So you have two use cases distinguished by comparing the aspect ratios.
First, you calculate the aspect ratios and compare them. (It's advised to rearrange the terms to avoid division by zero). Then, you calculate the coefficient used to stretch the video. If the video touches the left and right borders of the window, then the coefficient is the ratio between the window width and video width. Otherwise, the coefficient is calculated from height.
Centering the video in the window is straightforward.
So the algorithm is like this:
if videoX/videoY > windowX/windowY then
stretch the video by windowX/videoX
else
stretch the video by windowY/videoY
end if
center the video
I've seen quite a few post on here with similar questions and they seemed to have been answered great. However my problem is I can't understand the logic of whats going on and therefore I'm finding looking at the code pointless. Also I really want to be able to understand the code I'm writing. So really I'm not for any complete code as I think I can get that from other posts but if possible could someone explain to me the theory behind the code.
So, if I have a div 500px wide and 400px high and then two photos:
photo 1: 1000px wide 800px high
photo 2 : 250px wide 700px high
How do I re size these images to fit inside the div without them becoming stretched or distorted.
Like I said in the beginning I'm not looking for code. Could someone just explain the formula that fits the photos inside the div perfectly.
The (simple) asnwer is that the browser knows the aspect ratio of your image.
If you simply use an <img> tag, the image will be displayed in the original size (and aspect ratio).
now, if you specify the width, but not the height, the aspect ration will be kept, so your image will not be distorted.
If you use a CSS attribute like max-width and/or max-height that is pretty much what happens: your browser takes the image, and if necessary, scales both the with and the height by the same factor to match your specifications.
Does that answer your question?
The browser knows your images aspect ratio. If you want a 250px wide image to fit into a 500px wide container you'll need to scale it and lose quality or keep it as is.
Setting the width to 100% and the height left to auto will scale the image to fit it's width, without assuring that your height will match your desired output. You can scale it based on height, but the same problem applies. This is especially difficult when it comes to making the images responsive.
Using object-fit might help when you're container is the same, but the image vary widely in ratio, as seen here https://css-tricks.com/almanac/properties/o/object-fit/
Or having your images set as a background-image with background-size: cover.
when i work with flash i getting trouble when working with images
now my present project i'm uploading images dynamically, but here main problem is all the images sizes are different when i put the images into flash canvas every image looking different size means exact image size, but i need all the images should look same size in the canvas
check the image
if i change both of the height and width values that is not effecting any where, that is automatically taking fixed images size but i need all the images looks exact size, i didn't get any thing
I think I have the solution to your problem.
Basically, you need to create a container (if you haven't already done so) to 'hold' the images as they come up OR know the maximum height and width you want for the images. Then you need to make sure the aspect ratio is correct (so your picture won't be skewed. )
Code Example:
var wHRatio:Number=image.width/image.height; //this will give you the width to height ratio to make sure aspect ratio stays the same.
if (image.width>mcContainer.width){ //if not using container, enter max width
image.width=mcContainer.width;
image.height=image.width/wHRatio;
// at this point, if the height is still taller than the container, you want to shrink the image again so it's no taller than the container.
if (image.height>mcContainer.height){ //if not using container, enter max height
image.height=mcContainer.height;
image.width=image.height*wHRatio;
}
}
**** Don't forget to 'addChild' after you've completed the re-sizing.
This may not be the most efficient way of doing things, but I think it will work for your purposes.
Part 1: (maybe solved, see part 2)
Using meta viewport width=devicewidth locks you to a fixed page width.
I instead want the users' zoom to control font size, but always adjust the pagewidth to
fit in the zoomed viewport width. When you resize a browser window on desktop, it actually
does this (reflows your paragraphs to the changed width).
But default on tablets/mobiles, is that you pan around a fixed page-width.
Background: On mobile/tablets, I want to fit the contents/paragraphs to the user's viewport, so he doesn't have to 'pan around' the view. But I still want zoom to be useful: I just want it to scale the text. The default behaviour, where zooming to increase font size, also forces you to continously 'pan' left and right to read every paragraph, in my belief is useless. Though I now appear to have achieved it by adapting viewport-content-width continously, by my lack of experience I'm not sure if I've 'just achieved a kludge'.
Part 2: I've figured out a sort of solution myself. So.. are there better/more robust ways to do this/cross-platform?
I added this javascript event listener, to just update the viewport width dynamically, on window resize, and set viewport to same width as 'window.innerWidth':
(it assumes you set id 'theviewport' on your meta viewport tag.)
window.addEventListener( "resize", function(e) {
var mv = document.getElementById('theviewport');
mv.setAttribute('content','width='+window.innerWidth);
});
but is this a reasonable way?
Can you make your canvas resize to the page width using the style in the html of the canvas id?
And then in your js for the canvas just resize listeners based on the size of the canvas at the current time?
I have many of my variables and listeners hardcoded just wondering what is the fastest method of solving this :)
Firstly, a good starting thing would be not to take the entire page width, but a divcontainer. That way if you end up putting your app in a website or anything, your code will adapt to any container. If you want it to be the full page, this container can just be a 100% width/height absolute with no padding/margin.
Please also note that there are two sizes for a canvas :
The HTML size, which is the size you will draw on "programmatically"
The CSS size, which is the size it will be displayed, independently of the other size (and it will resize it, causing potential distortions)
Based on that, you can know an element's screen width using jquery $("#myID").width() or height(), which applies to the canvas too. Based on this you can set whatever size you want in html and/or css :
$("#myCanvas").width = 400; // The size you will draw on
$("#myCanvas").css('width', '800'); // The size it will be displayed (2x scale in X in that case)
Then for resizing you have multiple solutions :
CSS full stretching : You use your canvas with whatever size you'd like to code in, and then resize it in CSS to use the full page width, that is basically putting the css at 100% width / height
CSS stretching with aspect ratio : My prefered solution, which consists of resizing the canvas in CSS, but by keeping the original application's aspect ratio (and putting black borders on the rest of the screen, like in large-screen movies)
Pure canvas resizing : This method won't destroy graphics, but it has the big cost of making you think all your drawing with any size possible. Instead of having a fixed size canvas that is resized by the browser, you will have to multiply all your drawing sizes and positions according to the screen size, which can end up being very boring, and problematic if not thought soon in the development.
As an exemple here is my canvas manager, with CSS aspect ratio resizing. It is not documented and may not suit your need, but it can give you some ideas