I'm quite new to coding and tried creating a website with what I know to use as my future portfolio. However, my content overlaps my header when I resize my browser, I am hoping for smooth or at least something that doesn't overlap without using tons of media queries.
My header is a 1920x1080 video that is set to width 100%, object-fit: cover and position: absolute. It has header text on top of the header video. My whole page has a full-screen scroll, so my header video and text is wrapped in a div that is set to 100vh.
How do I stop my content from overlapping the header? I am hoping for something that resizes along with the header video, creating a block that the content can't go over, but anything that helps me otherwise would be great.
I tried adding a div but then the div would make the content go too far below sometimes.
I also tried using a 1920x1080 picture that has the same properties as my header video except the absolute positioning that I tried placing above my header but below my header text, but then the picture doesn't resize the same as the video and instead just takes the up the whole 1080px vertically.
I tried using media queries which worked, but I hope there is something else I can do other than using media queries.
Here is the code:
#header-video {
width: 100%;
object-fit: cover;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
overflow-x: hidden;
}
.header-text {
position: relative;
top: 175px;
left: 100px;
color: white;
}
.red-block {
opacity: 1;
width: 100%;
margin-top: -310px;
object-fit: cover;
overflow-x: hidden;
}
<div class="header-text">
<div class="h1-text">HEADER</div>
<div class="h2-text">TEXT</div>
</div>
<div class="red-block">
<img src="resources\red block.webp">
</div>
<header>
<video id="header-video" autoplay loop muted>
<source src="resources\header.webm" type="video/webm">
</video>
</header>
</div>
Related
Sorry for bad English, English is a second language
I have download a HTML template from
https://html5up.net/fractal
Now I am trying to change background with video playing
<body class="is-preload">
<!-- Header -->
<header id="header">
<video autoplay loop muted plays-inline>
<source src="/assets/css/videos/karing1080.mp4">
</video>
<div class="content">
<h1>Widget</h1>
<p>helper</p>
<ul class="actions">
<li>Download/p></li>
<li>More</li>
</ul>
</div>
</header>
This is css for video
video{
opacity: .3;
position: absolute;
min-width: 100%;
min-height: 100%;
height:auto;
width: auto;
top:0;
margin: 0;
overflow: hidden;
}
The problem is overflow does not work and horizontal scroll enabled.
I can tell that parent div is causing error but I do not know what and how to fix it.
I have spent so many hours on fixing it, plz let me know if you need more information for it
First of all overflow: hidden is an attribute that you apply on a container to hide the overflowing children, you can't just apply it on a children to contain it inside a parent, that's the opposite.
But there's better solution, we don't really need to use overflow: hidden;.
Here's CSS that will put your video in the back:
#header {
position: relative;
}
#header video {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
object-fit: cover;
}
object-fit: cover stretches keeping the aspect ratio the entire video to fill given space, which is 100% width and height parent container (#header).
Also make sure parent of the video has position: relative - in your code it would be #header, like in the code above, otherwise you might be setting the container in relation to unwanted element.
That's all :)
In order to have position: absolute working, the parent container needs a styling with position: relative. Try that and maybe give the parent container header also overflow: hidden.
I have a background video that I have got to scale based on the size of the browser/device. Im now trying to figure how to make it constantly go to the top of my page. For some reason when it scales down it pushes itself down.
The only way to adjust it is to make the height of the class .landing_video smaller which would then move it back to the top position, or I can make the top of #landingbg to a negative value. Are these the only ways to adjust the position to constantly stay at the top position?
HTML
<div id="landbg">
<video loop muted autoplay class="landing_video">
<source src="video/landingbg.mp4" type="video/mp4">
</video>
</div>
CSS
/*----Landing Page Styling----*/
#landbg{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.landing_video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The video looks fine at 1920x1080 its when it scales down to the device scale it almost looks like a form of padding. Any help would be appreciated.
Here is a fiddle to illustrate the problem http://jsfiddle.net/md7fqtvh/2/
I am having a client's Html Site Project, Where I used a video in the background of site's homepage, I used a absolute div outside of video with 100% height and width, My Client don't want a scrollbar on y-axis & I also cant use overflow:hidden; property of CSS, may be Client will adds some content in future, I am still confused if i have given 100% height and width to parent element of video then from where the scrollbar is coming when I use bottom:0 poperty with that div then scrollbar won't show but the size of video would be changed, why its happening please help me. Thanks in advance & and forgive me if I could not clear the exact problem which I am getting.
Site URL: http://trekoholic.com/site/
I used body { overflow-y: hidden; } as a temporary basis
CSS and HTML:
div#video-player {
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
<div id="video-player">
<video width="100%" height="100%" loop="" autoplay="">
<source type="video/webm" src="Video/eat.webm"></source>
</video>
</div>
you have to change
div#video-player {
position: absolute;
}
by
div#video-player {
position: fixed;
}
it works but has a counter, if the video has the largest height to the height of the bottom of the screen will not see, but if I understood correctly, this is desired, even in the future will allow you to add more content and will be seen without problems
if you want the full video display just add height: 100% to div#video-player
div#video-player {
position: fixed;
height: 100%;
}
the counter, if the video has different proportions than the screen may not fill the entire width
so I really hope this helps
I have the below image of a blank Macbook.
The image is 1034 × 543.
I want inset a youtube video inside of the "grey" area of the screen. I want it to appear as if the youtube video is playing on the laptop screen.
I also want the laptop image / youtube video to scale, so that when the web page is in a tablet or mobile view, the image and video shrink to match.
I am trying to use fitvid.js to accomplish this but am not having luck -- I can get the video to fit at one static size but I cannot get it to still fit perfectly on resize, it gets deformed.
Below is my current markup:
html:
<div class="col-sm-12">
<div class="title">
<h2>What's New</h2>
<small>ASC Sneak Peak</small>
</div>
<div class="macbook-wrapper">
<iframe width="715" height="402" src="//www.youtube.com/embed/**url**" frameborder="0" allowfullscreen></iframe>
</div>
</div>
SASS:
.macbook-wrapper{
background: url('../img/content/home/macbook.png') no-repeat;
.fluid-width-video-wrapper {
width: 97.5%;
background: #000;
}
}
You could instill some trickery with padding and percentages, that way you could have it scale accordingly. Basically, setting up a container that's purely % base, with an absolutely position iframe that scales accordingly to the container.
HTML
<div>
<iframe></iframe>
</div>
CSS
div {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
}
div iframe {
background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You'd just need to add box-sizing: border-box; and some padding to position the iframe within the screen. Check it out http://jsfiddle.net/41sdho4w/
To take it a bit further - here's a version with a container to help control the max-width and max-height rather then relying on the body / viewport http://jsfiddle.net/4g9e3ywy/
Alright.. I'm struggling with this one..
I've got an image with a transparent "hole" cut in it, and I place a video behind it. However, when the video is there, the image becomes sort of.. de-saturated.
Here is the CSS
.header {
position: relative;
}
.header img{
position: absolute;
top: 0;
left: 0;
z-index: 10;
cursor: pointer;
}
.header video{
position: absolute;
width: 168px;
left: 553px;
top: 109px;
z-index: 1;
}
And the markup
<div class="span12 header"><img src="img/screenshot-final.png"/><video src="img/video/video-final.mp4"></video></div>
I'm not sure why the video would effect the image since its dimensions are fit to the hole in the image. However, setting display:none on the video "fixes" the image.
Im pretty sure this is unavoidable, have you thought about placing the image ontop of the video to fit the hole with an appropriate z-index. Not ideal but I think the de-saturation is standard for a video overlaying an image!
EDIT: try putting you video in a div tag and the putting your image inside a div tag inside that div! then use absolute positioning to rectify the positioning! this should sort you out
EDIT:
<div class="span12 header">
<video src="img/video/video-final.mp4"></video>
<div id="image">
<img src="img/screenshot-final.png"/>
</div>
</div>