I have a video inside a div
When I use this code to expand the video
if (video.requestFullScreen) {
video.requestFullScreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullScreen) {
video.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
The video expands to the browser width and height rather than expanding the whole chrome window to the full screen size.
UPDATE : This was only happening with my browser ! There was no issue in the code
Use vh and vw.
video {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
1vh is 1% of the total portview height, 1vw is 1% of the total portview width. By default, the html and body tags only take up the height that the content does, not the entire screen. Similarly, a page with more than one screen's worth of content will have 100% be more space than 100vh.
position: fixed; for good measure so that it sits above the rest of the content in the corner and makes a snug fit.
Edit: Changed "absolute" to "fixed" so it will fit correctly on a long or wide page. fixed is relative to the browser, whereas absolute is relative to the parent container.
Edit 2: You've changed your question to ask how to make a video fullscreen, not fullpage. The answer subsequently changes.
Here is a guide on accomplishing this; be aware it uses JS and requires the user's approval of the action. You cannot hijack a user's browser.
http://www.sitepoint.com/use-html5-full-screen-api/
Related
On my website, I want to have a header image, of exactly the same height as the browser. So when you open the website you should see a picture, which covers all of the screen but isn't a background image. This way you should be able to move away from the image if you scroll down. The problem is, that if I say "browser height = pixel height", the format of the picture will change.
Because of that, I need to have a function, that automatically changes the width of the picture to the height of the browser or rather the amount of vertical pixels your browser has. If you scroll for example the picture shouldn't change.
Until now I have only tried CSS because I have no experience with javascript. After visiting many websites I still haven't found a solution to this problem. Here you can see what the website should look like on pc and a mobile device.
If I however try to look at the mobile version, it looks like this, even though it should look like the first picture.
Did you try to add media only attribute to your css? I used below max width 428 px because that is mainly on iPhone 13 but you can change it if you want.
.imageexample
{
display: block;
width:428px;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.box
{
display:inline-block;
width:100%;
text-align:center;
}
#media only screen and (max-width: 428px)
{
.imageexample
{
width:100%;
}
}
hey guys please i need help on page re-size.. how do I stop the content of the page from re-sizing when the page width is re-size to a smaller width just like facebook
If you want to stop content from resizing, put the Sizes in the places marked X and Y (in pixels)
img {
height:Xpx;
width:Ypx;
}
If you want to retain the aspect ratio of your images, you should check out -
How do you prevent resizing of images in CSS?
Here's the code from there
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
or
img {
width:100%;
height:auto
}
Both of them are almost the same
REFERENCE: http://www.templatewire.com/preview/landscaper/
I want to make a web page, and in that page, I want to have divs/sections each the size of the screen.
Now, I mean, the width and height of the monitor, and it won't resize again, and will stay the width and height of that monitor, regardless of the browser size, and regardless of how much content is inside it.
The link shows you what I mean, but I have a 1920x1080 browser window, you can see the top and bottom of the sections above and below it. I don't want the top and bottom of neighbouring sections to be seen if the monitor is very big, nor do I want the section to not be fully visible if the monitor's too small.
Example, say I had 5 sections like in the reference, and my browser window was 1920x1080, the overall height of that document would be 1920*5400.
(I want it to be the height of the screen minus the height on the nav bar.)
You can use Viewport units (the browser window size). 100vh is the height of the screen. If you got sections that bigger than the height of little screen you can use the min-height property and set it to 100vh.
Since you didn't place your code, this is generally example of use case:
section { min-height: 100vh;}
Read more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/length
Good luck!
It appears you're looking for viewport percentage lenghts.
To give any element current viewport's height, in CSS, one should use:
your-selector {
height: 100vh;
display: block;
}
If the element is a <div> or any other element with a default value of block for display, it obviously doesn't need the second rule.
See it working:
your-selector {
height: 100vh;
display: block;
transition: background-color .3s linear;
}
/* let's add a hover, for testing */
your-selector:hover {
background-color: red;
}
body {
margin: 0;
min-height: 200vh;
}
<your-selector>Test</your-selector>
Note: you can also apply viewport percentage lengths to other properties, such as min-height, max-height, etc...
Note: although default viewport is browser window, that's can change. For example, 3d transforms turn any regular DOM element into a viewport for their children, affecting behavior of viewport percentage lengths, as well as behavior of position:fixed in any of their children.
I am building a simple login website and I keep on running into the same problems over and over again. I would fix my css and once I switch it to my second monitor, because i am doing dual screen, it stretches out and looks bad. I researched this and found that i can add
$("document").ready(function() {
var screenHeight = screen.height;
if (screenHeight < 800) {
$('body').css('zoom', 0.);
} else {
$('body').css('zoom', 1);
}
to my code but it made the media queries change position and I had to do countless editing to just get the same results. If someone can please look at my code and help me out? Basically I am just trying to get everything to look smooth on different screen resolution. And also "#img-div, #login-div" isnt allowing me to move he div's back up. It seems broken and I am sure its something to do with the media queries. Here is my code
https://jsfiddle.net/etjhyw0j/
On Second monitor
https://gyazo.com/5460eb6b46b9029945eff2cbbcc6c853
On Laptop screen
https://gyazo.com/8ddbd518e0f8d8a70af1612393939925
My screen resolution is 1366 X 768
Second screen resolution is 1920 X 1080
just set a decent max-width to your #container.
#container{
width: 100%;
min-width: 200px;
max-width:700px;
height: 100%;
margin: 0 auto;
position: relative;
top: 0%;
}
oh, and set the body background-size to "cover" or "contain" to prevent deforming the aspect ratio, don't use 100% 100%.
https://jsfiddle.net/etjhyw0j/4/
I have a large image whose height is bigger than the screen height. I have no problem with the width. I need to crop it so that the top 65% of the screen contains this image.
<body>
<img class="img" src="image.jpg" alt="img">
<p>Description</p>
</body>
If I write a CSS as below, the whole image gets compressed to fit in 65% screen. Moreover, if I resize the screen, the image automatically starts attempting to fit in the top 65%, making the whole screen look disturbed.
body, html { height:100% }
img.img { height:65% }
I want instead, the image to be cropped so that the leftover fits in the 65%, and then it stays that way. That is, if I now resize the window, let the vertical scrollbar appear. How can I achieve this?
(PS: I didn't want to give a fixed height because I want the webpage to be viewed in different devices like mobile phone and iPads too.
I think this is what I need:
Get the maximum height of the device (not the current height of the browser screen as the user might have minimized it for some reason)
Crop the image in such a way that it fits the top 65%, and display it
Keep the image size that way irrespective of the user changing the screen size
But I am not sure how to achieve it.)
Is this what you are seeking: http://jsfiddle.net/JjwMw/1/
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 65%;
width: 100%;
position: relative;
top: -22.75%; /* 65*35/100 */
background-image: url(http://placehold.it/1024x768);
background-size: cover;
background-position: center bottom;
}
Note that the image is now a background-image and is leveraging the background-size property which is not supported in IE8 (...who cares?). If the image cannot be a background image, you scale a div proportionally to fill the width using a padding hack (Proportionally scale a div with CSS based on max-width (similar to img scaling)) and have the inside image set to 100% width and height.
Maybe this can be useful to you:
http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/
Also a search for css cliping property here or in google should bring enough info