I have a video that is the background of the page. The video is exactly where it needs to be but is causing a huge gap between it and the next element. When I inspect the element there is no margin or padding, just the video which is the correct size. I am not sure where the gap is coming from or how to remove it.
<video loop muted autoplay class="bg-video">
<source src="/assets/images/test.MP4" type="video/webm">
</video>
<h2 class="text-center">NEWS</h2>
That is the HTML. Nothing there but the video and the next element, which is an h2.
CSS:
.bg-video {
position: relative;
z-index: -100;
overflow: hidden;
left: 50%;
transform: translate(-50%, -50%);
}
screenshot of the space (screenshot has been resized)
you could try switching your position to fixed instead of relative, this takes it out of the flow of elements and it shouldn't be able to affect any others. i did a similar thing and the css was this:
#bgvid {
position: fixed;
min-width: 100%;
min-height: 100%;
z-index: -100;
}
Related
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>
I want the video tag to stick to the top (or bottom from the element above the video tag). When one resizes the window with the current code I am using, the video element will also remove itself from the top (or bottom from the element above in hierarchy in HTML). Is there a way to prevent the video coming loose from its top? I assume this is because the video tag is trying to keep its ratio and might has something to do with the width: 100%.
I made a JSFiddle here and here is my code:
HTML:
<div class="background-video">
<video autoplay loop muted>
<source src="somevideo.mp4" type="video/mp4">
</video>
</div>
CSS:
.background-video
{
position: relative;
}
.background-video video
{
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
height: 1080px;
width: 100%;
}
So how do I make it so that the video tag doesn't resize in an unpleasant way and still fills the space correctly?
You have to add to you CSS this line for responsive elements of video, image, iframe, etc.
CSS
audio, iframe, img, video {
max-width: 100%;
}
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'm trying to code up a new site where there's a big splash background as a "hero" image. Like this site has, but as a video where the image is of the lady unloading the car: https://www.simple.com
Resize and you can see how the image always fits within it's parent.
I put some of the code I've been working on in JSBin here (not making much progress): http://jsbin.com/ruqisa/1/edit
I can't seem to get that same behavior with CSS. I want the video to spill outside the parent either width or height wise depending on the dimensions of the screen.
Has anyone done this with pure CSS? JS I could calculate it manually on resize, but I'd really love to do this with just CSS.
EDIT: I'm not looking for the entire page to be a video, just the header background.
Let's adapt the technique outlined on the blog demosthenes.info.
Option 1 — Scroll with the page
The parent div:
is given a fixed height and overflow: hidden
The video:
is stretched with min-width: 100% and min-height: 100%
is placed behind content with z-index: -1 (can be any negative number)
To center the video:
top and left are set to 50% which places the top-left corner in the middle of the parent div
the video is offset by half the height and width by dragging it halfway up and to the left with transform: translateX(-50%) translateY(-50%);
Simplified example
Here is a full demo with all your markup.
body {
height: 200vh;
margin: 0;
}
div {
height: 500px;
overflow: hidden;
position: relative;
}
video {
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
z-index: -1;
transform: translateY(-50%) translateX(-50%);
}
<div>
<video autoplay muted loop>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>
2 — Fixed full page background
The video:
doesn't need a wrapper, it can be placed anywhere on the page
is made position: fixed and will position itself in relation to the browser window (viewport)
is stretched with min-width: 100% and min-height: 100%
is placed behind content with z-index: -1 (can be any negative number)
To center the video:
top and left are set to 50% which places the top-left corner in the middle of the screen
the video is offset by half the height and width by dragging it halfway up and to the left with transform: translateX(-50%) translateY(-50%);
Simplified example
Here is a full demo with all your markup.
body {
margin: 0 auto;
padding: 50px;
color: #FFF;
width: 600px;
}
video.background {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -1;
transform: translateX(-50%) translateY(-50%);
}
<h1>I am content</h1>
<p>I am content too!</p>
<video class="background" autoplay muted loop>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
.big-splash video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(some.jpg) no-repeat;
background-size: cover;
}
DEMO: http://jsbin.com/lunarugibe/1/
Source: Create Fullscreen HTML5 Page Background Video
The video is first positioned absolutely then centered using top, left and transform properties along the X and Y axis. That -webkit- vendor prefix is for safari (Can I use... Support tables for HTML5, CSS3, etc).
The min-height and min-width properties force smaller resolution video to occupy the whole page.
The background property gives a preview image until the video is ready to be played. background: cover is for this preview image, to make it occupy the full area.
and the z-index value makes sure that the video is behind all other elements.
Yes, you can achieve this affect with pure CSS pretty easily:
.container {
height: 600px;
width: 100%;
overflow: hidden;
}
.video {
min-height: 100%;
min-width: 100%;
}
If you want to keep it centered or do a full screen video, you will probably need to use some Javascript for calculating window heights.
I'm helping out with a website, we want to have a video background when you land on the site.
It works just fine on Google Chrome but it does not work as expected on Safari.
Here is the website (please compare it with chrome and safari): http://tinyurl.com/nbe8rzy
HTML For video:
<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="<?php bloginfo('template_url'); ?>/assets/img/video1.mp4" type="video/mp4">
</video>
CSS for video:
video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
background-size: cover;
z-index: 1; }
I'm using fixed position with z-index 1 on video, and relative positioning with higher z-index then 1 on rest of the divs (so the video stay in the background).
Problems on safari:
Video streching is delayed
The other divs does not show
Questions:
How can I fix this? (Code/link/help is very much appreciated!)
Is it possible to use video background for mobile/ipad? or should it fallback to a image?
Update your video background div to
#yourvideobackground {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
To work around and have the video work on most browsers including Safari, you're going to have to give it an absolute position, and set its z-index below all other elements above it.
You can't use the background-size attribute either, not for a video.
If you want that inside of another div, make sure that the parent div has an a relative position set.
If you don't want to go that route, you can use a nifty plugin that I've had success with.
https://github.com/Victa/HTML5-Background-Video
Good luck!