Hey all you wizards of the interwebs,
I've been pulling my hair out for the past couple of days trying to figure this one out.
I'm trying to include a fullscreen video background and it seems I have hit a snag.
Below is an image of what I am trying to accomplish.
I tried it with the video element as well as an iframe. I can't get the div below to always nest under, when the browser window is resized.
Any help or pointers are greatly appreciated. Closest I've gotten was with a min-width/height but it still leaves a gap...
What I end up with is what shws in the 2nd img. The video resizes with the browser and there's a gap below it
To prevent the problem you need to do this:
css:
.div1{ background-color: red; height: 100%; position: relative; overflow: hidden;}
.div2{ background-color: black; height: 100%;}
video{ position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; top: 0; bottom:0; right: 0; left: 0;}
and put your video inside div1:
<div class="div1">
<video autoplay>...</video>
</div>
<div class="div2">
</div>
It don't allow video element to show at overflow. and div1 is always height:100% and div2 is always height:100%.
If you like to fit the video to the div1 add
object-fit: cover;
to the video tag.
IE Doesn't Support object-fit
I'm not sure if this will work but
Have you tried removing width: 100% and only keeping height: 100% ?
I might be able to give better suggestions, if you can show the code :p
EDIT:
Since you want height to be screen height and width can be more or less, I'd say, try
min-height: 100%;
width: auto;
height: auto;
This should do the trick
NEW EDIT:
body{
overflow:hidden;
}
#wrapper {
width: 100%;
height: 100%;
}
.videoInsert {
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
position: absolute;
left: 0%;
top: 0%;
}
video{
display: inline-block;
vertical-align: baseline;
object-fit: fill;
}
Related
I am trying to replicate the Landing Page used on X Theme's Integrity 1, but I run into difficulty figuring out a way to keep the video full screen and focused at the center without making it the entire background. I have tried:
<style type="text/css">
body {margin: 0; padding: 0; background-color: green;}
#landing {margin: 0; padding: 0; top:0; left: 0; height: 100%; width: 100%; position: absolute}
video {top:0; left:0; min-width: 100%; min-height: 100%; width: 100%; height: auto; background-size: cover; bottom: 0;}
</style>
<body>
<div id="landing">
<video id="sey" src="seydrone.mp4#t=57,286" preload="auto" autoplay="true" muted="muted" loop="loop" type="video/mp4"></video>
<span id="welcome">DISCOVER NATURE'S SECRETS</span>
</div>
</body>
When the browser is in full-screen, it works perfect, but upon shrinking the page the landing video does not respond as per the X Theme demo does. I intend to place my nav-bar as per the demo and scroll down just the same which is why the background option is not possible.
Any help/suggestions would be thoroughly appreciated.
They have used some JavaScript for that, but there is a way to do it without JS.
Change your video styles to this:
video {
// Force video to cover screen
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
// Center video
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Ok, so I want to place a video so that it's height is 100% of the browser window, but not the video, so instead of the video height being 1080px (with scrollbars) but the height relative to how tall the browser window is.
Here is my current styling (it works):
video {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
}
I'd like it to look like this:
--Meaning no padding and no scrollbar. I've tried the viewport height css property, but that causes a scrollbar. The code aforementioned does yield the results I am looking for, but it is an extremely inefficient way to do such a simple thing, and I do not know if it will display the same way in other browsers. Here it is live...
Is there a JavaScript alternative? Or better yet pure-css?
Percentage heights of elements in the normal flow of the document only work when an ancestor element has had its height definitively set.
But, to skip all of that, set it to 100% of the viewport height:
height:100vh;
Reset the Body and HTML Tag then you can use 100% and get true 100% height and width.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#fullscreen-video{
width:100%;
height:100%;
background-color:green;
overflow:hidden;
}
<div id="fullscreen-video">
<iframe id="video" width="100%" height="100%" src="https://www.youtube.com/embed/A3PDXmYoF5U" frameborder="0" allowfullscreen></iframe>
</div>
Alohci explained that I should use vertical-align: top; to remove the scrollbar, with help from him and other answers from Scott Marcus and Timothy. All received answers were helpful and contributed to the final answer seen here.
So, my previous css:
body {
background-color: #000000;
}
video {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
}
And my new css:
body {
background-color: #000000;
margin: 0;
text-align: center;
}
video {
vertical-align: middle;
height: 100vh;
}
Here is a simplified JSFiddle of the problem.
As you can see, the content is beat out of alingment with the header because of the scrollbar.
As far as I know, the only way to deal with this is to calculate the width of the scrollbar using Javascript (David Walsh's excellent method springs to mind) and to set it as left/right: -scrollbarwidthpx value to the header.
However, considering the dynamic nature of the page I'm working on, with the headers place in the DOM and position changing depending on at what point the user has scrolled to, this is an option I am hoping to turn to only if there's nothing else I can do.
My question is, is there any way that I can maybe take the scrollbars or the content out of the flow while preserving a scrolling overflow, or otherwise align the two elements using only HTML/CSS? Are scrollbar widths consistent across all browsers/OS's that have them affect the flow? Or will I have to resort to using Javascript to align them?
Thanks!
html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
.scroll {
overflow: auto;
width: 100%;
height: 100%;
}
#content{
width: 400px;
height:auto;
margin: auto;
background:gray;
}
.header {
width: 400px;
position: fixed;
margin: 0 auto;
height: 60px;
background: yellow;
z-index: 10;
}
.content {
height: 1200px;
background: linear-gradient(red, orange);
width: 100%;
margin: auto;
position: relative;
z-index: 1;
border-top:61px solid;
border-bottom:1px solid;
}
<div class="scroll">
<div id="content">
<div class="header"></div>
<div class="content"></div>
</div>
</div>
So here is the idea, creating a sidescrolling game from JS, and working on the enviroment. The foreground element is set to scroll normally, the background elements are fixed (sky, sun). I have a middleground element that I want to scroll along with the foreground, but I want it to move in smaller 'porportion' to the foreground. It is a fixed element of the page, so I suppose that I will probably need to access the layer and adjust the background-position, but I am not sure how to accomplish this in javascript. Would really like to leave jquery out of the equation and go just with the JS and CSS.
CSS code:
<style>
body{ background: #5993fc; text-align: center; height:100%; width:100%;
padding: 0; margin: 0; overflow-x: auto; overflow-y: hidden; }
.sun{ position:fixed; height: 320px; width: 320px; z-index: 10;
background-image: url('wasteland/wasteland_sun.png'); opacity: .9;}
.cloud{ position:absolute; height: 160px; width: 800px; z-index: 30;
background-image: url('wasteland/wasteland_cloud.png'); }
#ground{ position:absolute; height: 169px; width: 10000px; z-index: 130;
background-image: url('wasteland/wasteland_foreground.png');bottom: 0px;left: 0px; }
#middleground { position:fixed; height: 244px; width: 100%; z-index: 129;
background-image: url('wasteland/wasteland_middleground.png');bottom:80px;left:0px; }
</style>
You can see an example of the actual page and issue http://thomasrcheney.com/games/wasteland-perspective.html
and a jsfiddle here http://jsfiddle.net/K5f7b/
The only thing I can think of after pondering is an event listener attached to the arrowkey, but that would be useless if the user were to grab and drag the scrollbar. Just not even sure how to best approach writing a function to handle this.
I'm having some trouble with a page that has a floating background image (absolutely positioned) where the image is dynamically changed out via javascript. Basically this is a big gallery that changes behind a portfolio:
I have a section of markup that looks like this:
<div class="content">
<div class="content-container">
<div class="content-image">
<img id="galleryTarget" src="../images/main/source.jpg" class="image-resize" alt="background image"/>
</div>
...etc...
Here's the relevant CSS classes:
.image-resize {
position: absolute;
min-height: 750px;
min-width: 1000px;
width: 100%;
left: 0;
text-align: left;
vertical-align: middle;
margin-top: -25%;
top: 25%;
}
.content-image {
position: absolute;
top: 0;
left: 200px;
width: 100%;
min-height: 750px;
max-height: 750px;
min-width:1000px;
overflow:visible;
opacity: 0.5;
z-index: 1;
}
.content-container {
position: relative;
min-height: 750px;
}
.content {
position: absolute;
top: 0;
width: 100%;
max-height: 750px;
overflow: hidden;
background: purple;
z-index: -5;
}
This is all absolutely positioned so that I can swap out the image source with Javascript and then dynamically resize the container (background) to fill the new content. There's minimum bounds so it always has a size.
What I'm trying to do is to pin this image to a CENTER point so that when it is resized the interesting parts of the image (rarely the top left corner) are displayed.
In the inspector in chrome I see that top and margin-top are never the same value even though they have the same (percentage) value. What am I missing here?
Example:
top: 187.5px and margin-top: -389.5px. It looks as though margin-top uses the img-source resolution and top uses something for the life of me I can't figure out--I'm assuming min-height + the offset in the page?
Any help here would be appreciated, this is a rather large part of the design and I'd love to have it better than what it is.
Browsers:
Chrome Version: 30.0.1599.66 m
Android Chrome: 30.0.1599.82
This does fix the problem in chrome--but I'd like to know why it is using 1000px as the baseline for the margin instead of the 750px of the unit.
/*Hack of a vector similar to 50%*/
margin-top: calc(-50% * 0.75);
top: 50%;