I'm using a full screen canvas as background of the first section of my page. But as soon as I add the second section and vertical scrollbar appears, the height of canvas reduces a little bit and a gap appears. here's my code:
P.S: Sorry, my code contained bugs, I fixed them. now you can see the red gap.
var canvas = document.getElementById('canvas')
var c = canvas.getContext('2d')
scaleCanvas()
window.addEventListener("resize", scaleCanvas)
function scaleCanvas() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
c.fillStyle = 'black'
c.fillRect(0, 0, canvas.width, canvas.height)
}
* {
box-sizing: border-box;
max-width: 100%;
}
body {
margin: 0;
padding: 0;
}
#first-section {
position: relative;
min-height: 100vh;
background-color: red; /* to see the gap */
}
#content {
position: relative;
z-index: 2;
}
#second-section {
min-height: 100vh;
background-color: blue;
}
#canvas {
display: block;
padding: 0;
margin: 0;
border: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
<div id="first-section">
<canvas id="canvas"></canvas>
<div id="content">content</div>
</div>
<div id="second-section"></div>
Assuming you mean full screen, and not full page. The two are very different.
If you mean full page then the link to the Screen API will also give you details on obtaining the page size.
Size full screen canvas.
The problem is that you have content that extends outside the page width and height (innerWidth, innerHeight)
The elements with ids first-section, content, and second-section must be inside the display area or else you will get a scroll bar. The scroll bar will change the innerWidth, innerHeight values subtracting the scrollbar width or height depending on which is visible.
To prevent scroll bars the best option is to keep all content inside innerWidth, and innerHeight
Full screen with scroll bars.
If you want have the scroll bars and you are using full screen you can use the Screen API to get the width and height of the display in pixels. You can set the canvas size to match the screen without the scroll bars effecting its size.
Note Do read the provided link to Screen as what defines the screen may not be as expected. EG more than one monitor, or device orientation will effect how you use the API.
Basic example
Thus when in full-screen mode you can set the canvas size and ignore scroll bars with
function sizeFullScreenCanvas() {
canvas.width = screen.width;
canvas.height= screen.height;
}
Related
I set the canvas's size in js:
const cv = document.getElementById("cv");
cv.width = innerWidth;
cv.height = innerHeight;
However, there are scroll bars apeared.
How can I deal with it? (without using overflow: hidden)
Using overflow: hidden is the correct and easiest code to place in your CSS.
#cv {
overflow: hidden;
}
This will remove the scrollbars.
However, if you want to avoid that code, you can set padding and margin to 0, which will more or less have the same effect.
#cv {
padding: 0;
margin: 0;
}
This will also remove the scrollbars, kind of like overflow: hidden.
The width=100% height="auto" scales my videos to fit the whole width of the browser window, but if the height of the window is lower than the aspect ratio the video gets cropped in height.
I want the video to scale to fit either width or height so that I can always see the whole video without crop, filling the closest ratio (adding empty space to sides if window ratio is lower).
I can't figure out how to do this however.
First any height value, % or px, seems to be disregarded, I can't set the size at all using height, only width. Same for min-width/height.
How can this be done?
My code:
<video id="video" width=100% height="auto" onclick=playPause()></video>
Video is loaded by javascript where v is a video link from an array:
video.addEventListener('play', function() { v.play();}, false);
Try wrapping the value inside quotes
<div class="videoContainer">
<video id="video" width="100%" height="auto" onclick="playPause();"></video>
</div>
you can add these class
.videoContainer
{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
.videoContainer video
{
min-width: 100%;
min-height: 100%;
}
Or alternatively use this
video {
object-fit: cover;
}
Solved it myself with a javascript function:
window.addEventListener('resize', resize, false);
video.height = 100; /* to get an initial width to work with*/
resize();
function resize() {
videoRatio = video.height / video.width;
windowRatio = window.innerHeight / window.innerWidth; /* browser size */
if (windowRatio < videoRatio) {
if (window.innerHeight > 50) { /* smallest video height */
video.height = window.innerHeight;
} else {
video.height = 50;
}
} else {
video.width = window.innerWidth;
}
};
There's a great auto width/height trick called intrinsic ratios that can be used on images/videos and the likes! The trick is to have your desired element in a wrapper that then has a percentage-valued padding applied to it.
Your markup would then be:
<div class="video-wrapper">
<video class="video" id="video" onclick=playPause()></video>
</div>
And your CSS:
.video-wrapper {
position: relative;
padding-bottom: 20%;
height: 0;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ccc; /* Random BG colour for unloaded video elements */
}
You can limit the dimensions of your video container by playing with min-width or max-width of the .video-wrapper styles.
Hope this helps!
I had a similar problem. I have made a `slideshow' with various objects as slides, some of them are videos of various sizes. I did not found any conceptual solution, so I have found a trick.
I have explicitely specified all real video sizes in tags and collected the information of all of them:
var vids = document.getElementsByClassName("vid"); // videos
var vidl = vids.length;
var vidH = [ ];
var vidW = [ ];
// Get original widths and heights of videos
for (i=0; i<vidl; i++) { // >
vidH.push(vids[i].height);
vidW.push(vids[i].width);
}
Then (when necessary) I define the window size as follows:
// Current inner height of the browser window (in pixels)
var iH = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
// Current inner width of the browser window (in pixels)
var iW = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
To rescale a rectangle into another rectangle we have to find a minimal scale:
var r, rh, rw;
// Scale videos to fit window
for (i=0; i<vidl; i++) { // >
rh=iH / vidH[i]; rw=iW / vidW[i]; r=Math.min(rh, rw);
if (rh>rw) {
vids[i].height=Math.floor(vidH[i]*r);
vids[i].width=iW;
}
else {
vids[i].height=iH-5;
vids[i].width=Math.floor(vidW[i]*r);
}
}
Unfotunately, here appeared some extra space; in FireFox I have found its minimal value as 5 that I negate form windows height value (iH) as the new video size.
Duplicate issue on the height posted at HTML5 Video dimensions in Safari IOS
Pure CSS solution provided in: https://stackoverflow.com/a/60878701/2486998
You can add style:
object-fit: contain;
In Angular if video player (shaka player in my case) is a separate component, this works perfectly (either height or width of container will cause resize of the player)
HTML
<div id="videoContainer"
class="videoContainer">
<video id="videoPlayer"></video>
</div>
CSS
.videoContainer
{
height:100%;
width:100%;
}
.videoContainer video
{
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
}
In bootstrap I have a fixed top nav bar and fixed bottom nav bar. I want to show a large image in the background between the space of those two nav bars and I also want to cover the width of the window. How can I dynamically get the height between the navbars and the width of the window? The window size may change depending on device.So I need it dynamic
Requires jquery:
var viewport = {
width : $(window).width(),
height : $(window).height()
};
//can access dimensions like this:
//viewport.height
Though you won't always get perfect results, different devices behave differently and this gives the viewport dimensions, not the screen dimensions.
Alternatively you could check the width of a data-role="page" element to find the device-width (since it's set to 100% of the device-width):
var deviceWidth = 0;
$(window).bind('resize', function () {
deviceWidth = $('[data-role="page"]').first().width();
}).trigger('resize');
$(window).resize(function() {
var top_nav_height = $("#id_of_top_nav").height();
var bottom_nav_height = $("#id_of_bottom_nav").height();
var window_height = $(window).height();
var height_of_open_space = window_height - (top_nav_height+bottom_nav_height);
$("#id_of_img").css({
height:height_of_open_space+'px';
});
});
this will be fine with if 0px padding and margin, if not also get that values and subtract from height_of_open_space before applying to img height
It is a bit hard to tell without seeing any of your markup, but it should be feasable with pure css. I set up a very basic example to demonstrate:
http://codepen.io/anon/pen/XbGJJO
HTML:
<div class='top'>
top navbar
</div>
<div class='content'>
<p> some content </p>
</div>
<div class='bottom'>
bottom navbar
</div>
CSS:
.top, .bottom {
height: 40px;
background: red;
position: fixed;
width: 100%;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
.content {
margin: 40px 0;
min-height: calc(100vh - 80px);
background: green; /* background goes here */
}
The trick lies in the following line:
min-height: calc(100vh - 80px);
This tells your content to at least take up 100% of the vertical height, minus the height of the top and bottom bar. Let me know if you want me to explain further.
I've got a background video playing on a web page, and this CSS;
#video_background {
position: fixed;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
top: 0px;
left: 0px;
z-index: -1000;
overflow: hidden;
}
..is keeping it centered, like I want it to, but it's keeping all of the edges within the browser window, rather than always being full-bleed. I'm trying to replicate what this site is doing;
http://marisapassos.com/#home
This site appears to have two sets of rules, one on a div that contains the video, and one on the video itself. Could someone explain to me why that works and what I'm doing doesn't? Is there also js working to keep the video on the linked site centered?
Yes, look at the video_background.js in the source of the website you linked to, specifically at the $(window).resize function:
$(window).resize(function() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var width;
var height;
//size
width = windowWidth;
height = width*formH/formW;
if(height<windowHeight){
height = windowHeight;
width = formW*height/formH;
}
$div_holder.css("width", width);
$div_holder.css("height", height);
$div_holder.css("left", windowWidth/2-width/2);
$div_holder.css("top", windowHeight/2-height/2);
});
Left and top are defined in terms of both the windowWidth and (video) width which keeps the video centered.
I have a problem to get my window size, I try this code:
Javascript
var game;
function game() {
this.canvas = document.getElementById('canvas');
this.canvasWidth = window.innerWidth;
this.canvasHeight = window.innerHeight;
this.initCanvas = function() {
this.canvas.style.width = this.canvasWidth + "px";
this.canvas.style.height = this.canvasHeight + "px";
}
this.run = function() {
this.initCanvas();
}
}
game = new game();
game.run();
I also have
CSS
html, body {
padding: 0;
margin: 0;
}
I only have a canvas in my body.
Problem is, that I have a vertical and horizontal scroll bar. This means the size of canvas is too large. How to make it of the window size without the scroll bars appearing?
It looks like you're just trying to make your canvas have a width and height of 100%. You can do this with just css:
HTML
<body>
<canvas id="canvas"></canvas>
</body>
CSS
body, html {
height: 100%;
width: 100%;
margin: 0px;
}
canvas {
background: #ffcccc;
height: 100%;
width: 100%;
display: block;
}
Demo
Or if you want to use your code but get rid of the scroll bars on the window, you need to specify block on the canvas tag.
CSS
canvas {
display: block;
}
Demo
When you use CSS to style your <canvas> element it will get scaled instead of sized. Be sure to set the .width and .height properties on the canvas element instead (ie canvas.width not canvas.style.width).
jsfiddle example
In the example the first canvas element is scaled correctly, the second (using CSS) is not scaled properly. This has to do with a default canvas element size (300x150) that CSS scales.
To prevent getting scrollbars when setting the <canvas> to the full window width/height set the body to overflow:hidden; as used in the jsfiddle above.