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
Related
I am developing a responsive website.
For this website the padding and width of the elements are in proportion of the width and/or height of the web page.
So I have preferred to use the viewport related units (vh, vw).
Everything scaling absolutely fine till the time I got a new requirement...
Now I have to put the max width and height to my webpage. max width of 1366px and max height of 768px.
So I have added max-height and max-width css styles to my html tag.
Web content is now restricted in this range, but still the padding and width is getting calculated considering the whole width and height of the page as viewport.
For eg. if screen width is 1500px then 10vw is calculated as 150px. But what I need is it should not exceed 136.6px as max width is 1366px.
So is there any way to restrict the width and height of the viewport?
Like
<meta name="viewport" content="width=device-width, max-width=1366, max-height=768, initial-scale=1">
If you are required to have fixed sizes for your viewport, there is no point in using viewport-relative measures like vh, in some cases you'll manage to do the trick with percentages, but I wouldn't recomment it.
The best way to do this is to edit the viewport with javascript, there are a couple ways of getting the widths and heights of screens in JS
Again, as #hungerstar mentionned in a comment, it is not recommended to have fixed viewport sizes, so make sure you really have this requirement before you jump into it.
Hope it helps
I have a website that has a lot of components which are animated using JavaScript. The website is mainly targeted at users on a desktop. All of the coordinates for the animations, and all of the sizes for the images, depend on the viewport having a width of exactly 1920px (although it could be any height greater than 1000px and it would work). If the viewport is any other width, the images and the animations look like nonsense due to the change in coordinates.
Is there any way I can scale the viewport such that even if it isn't 1920px wide, all of my coordinates and sizes will still be treated as if it is?
I have tried setting <meta name="viewport" content="width=1920">, using the CSS zoom property, setting min-width: 1920px on the body element, and setting the browser zoom using JavaScript, all to no avail.
Have you tried using "vw" to set the width of your elements?
http://www.w3schools.com/cssref/css_units.asp
"vw" is a length unit of 1/100th of the viewport width.
Try using it like this on your css file:
.yourelement {
width: 30vw;
}
Why don't you set your html/body to have a hard width of 1920px in your stylesheet?
html, body {
width: 1920px;
}
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 need to create block with fixed width and fixed height dinamically (with javascript). Width needs to be a 100% of document body width, and height needs to be a 100% of document body height. In other browsers all is fine, but Firefox Mobile have a top bar (wich I belive have affect on height of document), so all height calculations on document loading are wrong. When I scrolling page down this top bar hides, and I can see height of my block is shorten then I need...
Is there any solution? Thanx in advance!
Try to use this:
$(window).width();
$(window).height();
Should work.
I'm an absolute beginner at flash so please bear with me. I'm using Adobe Flash CS4
I'm currently trying to fit a flash intro inside the browser window (height 100%, width 100%). I've tried changing the height, width attributes but with no luck. What am I doing wrong?
Thank you!
In the publish settings, under HTML, for the Dimensions setting, select percentage and set height and width to 100%. Then publish the SWF and HTML. Note: you can also accomplish this in the HTML file loading the Flash object by setting the width and height attributes of the embed object to 100%, and the scale attribute to exactfit.