video {
width: 100%;
z-index: 1;
position: fixed;
}
I try this one it's working fine but it's fixed in the whole body...
You should set your selector for example:
#headerid video {
width: 100%;
z-index: 1;
position: fixed;
}
It will fix the video in the headerid element. It could be div but you must fix the width and height of the div.
Related
Need help on making an iframe responsive, keeping the height intact, but cutting width up to the center of a video when changing width of screen, instead of keeping the full width video.
<style>
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 45.98%;
}
.responsive-iframe {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
Right now i have this style code, where if I resize the browser window, it resize the entire video's height. But I need to keep the height, and cutting the video's width.
In the photo below, I Show an example of how I would like it. Same Height, but cutting the video's width responsively.
https://i.stack.imgur.com/uTmXH.png
I had made css pre-loader which has a some-colored background and a bouncing ball. The background however doesn't spans the window entirely.The page before which the preloader appears is scrollable, and when I try to reload the page, the preloader background doesn't cover the entire page, but only till the window size from the top.
The preloader code was mentioned in this question: Preloader does not fade out online
Help appreciated.
Change position: absolute; to position: fixed; and add width: 100%;.
If it doesn't fill the whole page use height: 100vh; instead of a percentage value.
So #loader should look something like this:
#loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
background-color: #0f2338;
z-index: 99;
}
I have a jsfiddle animation that I want to set to use as a background div of a png image. I can set the height and width of the animation and I tried setting it to the div using
document.getElementByID('progress').appendChild(canvas);
However, instead of the canvas displaying where it should it shows up under the image with the functioning animation. Here is the jsFiddle.
The canvas will be placed underneath the #progressbar because the default css of this element is. position:static;.
When applying position:absolute; on the canvas it will be place on top of the #progressbar.
To be more precise:
#progress{
position: relative;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
Depending on the exact placement in the z-dimension, you can use z-index:-1; or z-index:1;. By doing this the canvas will be in front or behind the #progressbar.
Example code: http://jsfiddle.net/u4cLxjrg/1/
http://jsfiddle.net/3qc2p1va/
I added some CSS styles to the canvas element, made it absolute and positioned relatively to its parent.
canvas {
display: inline;
position: absolute;
top: 20px;
left: 0;
right: 0;
margin: 0 auto;
z-index: -1;
}
Apply this css. Z-index will put the canvas under others div.
#progress {
position: relative;
}
canvas {
top: 0;
left: 0;
z-index: -1;
position: absolute;
}
I have the following code http://jsfiddle.net/Leytgm3L/22/ and as you can see here on first "section" I have the video background. Now, when user scrolls the webpage down, so far the whole video goes up. I would like to achieve the effect that the webpage overlaps it, so the video and its section is fixed to the page. I have the following CSS code:
.video-container2 {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
.video-container2 video {
position: absolute;
z-index: -1;
width: 100%;
}
and I tried to add:
position: fixed
instead of absolute, but it didn't do the trick...
How can I do that?
position: fixed will do the trick, but you need to set the top/left/bottom/right with 0 instead of 0%:
.video-container2 {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
With bottom and right set, you don't need height and width anymore.
jsfiddle: http://jsfiddle.net/Leytgm3L/23/
In the comments, we talked about centering the video, even with oversize, and having it fill the viewport no matter the size of the screen. The only way to properly achieve that was with JavaScript. Using jQuery:
$(document).ready(function() {
setVideoSize();
});
$(window).resize(function() {
setVideoSize();
});
function setVideoSize() {
// ratio of video in pixels, width/height
var videoRatio = 320 / 176;
// ratio of window in pixels, width/height
var screenRatio = $(window).width() / $(window).height();
if (videoRatio < screenRatio) {
$('.video-container2 video').width($(window).width());
$('.video-container2 video').height('auto');
} else {
$('.video-container2 video').height($(window).height());
$('.video-container2 video').width('auto');
}
}
And to center it, we can use this sort of hacky CSS:
.video-container2 video {
position: absolute;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
}
jsfiddle: http://jsfiddle.net/Leytgm3L/28/
Change your top/left values to 0 instead of 0%.
.video-container2{
position: fixed;
top: 0;
left: 0;
http://jsfiddle.net/Leytgm3L/25/
Just wanted to say thanks in advance.
First I have a single div that is Height: 100% and Width: 130px I have a 130x5px image that i want to repeat vertically until i get to 75% of the screen height. Then i want to place another image directly underneath it. I know how to repeat the image vertically. But i am not sure how to attach another image directly below it.
P.S. I want it to all be in the same div so that i can use JQuery to control the div and not just the individual elements inside of it.
How about something like this:
div.snocavotia {
background: url(http://lorempixel.com/130/5/) repeat;
z-index: 100;
height: 100%;
width: 130px;
position: relative;
}
div.snocavotia:after {
background: url(http://lorempixel.com/130/30/) repeat;
z-index: 1;
content: '';
position: absolute;
top: 75%;
right: 0;
bottom: 0;
left: 0;
}
Example: http://cssdesk.com/h2XGc