hello,
whenever i resize my screen to lower size there is an increasing gap, how to fix this?
Here is my pictures for better understanding
Welcome, @rakeshtagadghar1. It is very hard to determine what is causing that gap if we can’t see the code you used. Could yo please post your relevant html and css here?
Please make sure your format it for easier reading, by placing three backticks (`) on the line before the code and three backticks on the line after the code.
<section class="mega">
<div id="video-viewport">
<video autoplay loop id="video-background" >
<source src="video/fbvideo.mp4" type="video/mp4" />
<source src="video/fbvideo.webm" type="video/webm" />
</video>
</div>
</section>
and This is CSS code:
.title h1 {
font-size: 60px;
font-weight: lighter;
}
.video-background{
position: absolute;
#video-viewport {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
transform: matrix(1, 0, 0, 1, 0, 51.2727);
}
video {
display: block;
width: 100%;
height: auto;
}
.mega {
height: 500px;
overflow: hidden;
max-height:537px;
}
.mega:before {
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.mega:after {
content: "";
background-size: 3px 3px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.caption a {
color: #fff;
text-transform: uppercase;
border: 2px solid #fff;
padding: 10px;
font-weight: 800;
font-size: 20px;
}
.mega .caption {
display: table;
width: 100%;
max-width: 24em;
height: 100%;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 2;
text-shadow: 0 1px 5px rgba(0, 0, 0, .5);
}
.mega .caption > div {
text-align: center;
display: table-cell;
vertical-align: middle;
padding: 0 2em;
}
.mega h1 {
color: #fff;
text-transform: uppercase;
font-weight: 900;
font-size: 32px;
margin-bottom: 150px;
}
@media all and (max-device-width: 500px) {
.desc, .meta, .tools, .nav-icon {
display: none !important;
}
.title {
text-align: left !important;
letter-spacing: 1px;
}
#video-viewport video {
display: block;
width: 100%;
height: 500px;
}
.mega {
background: url(../img/home.jpg) no-repeat center center fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
height: auto;
width: auto;
}
}
.banner {
height: 100%;
width: 100%;
}
Hi,
You didn’t explain what you wanted to happen?
Obviously as a video width reduces its height will also reduce to maintain the aspect ratio and it seems you have set height to hold the initial space open and thus you will get a gap when the video is smaller.
If you want a full screen video effect then this codepen was from a recent thread which may help.
Alternatively if you just want a responsive video then use the padding method.
ty for reply PaulOB, sorry , i did’nt write what i wanted to get, video is top element followed by lots of images under itin a different
It’s difficult to give specific advice without seeing the full html and css and links to the videos and images etc but I would go with the padding method I linked yo in my first post.
I’ve added that method into the code you posted but of courser I don’t know what you were doing with all the other stuff that’s listed but not shown.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html, body {
margin:0;
padding:0;
}
.title h1 {
font-size: 60px;
font-weight: lighter;
}
#video-viewport {
position: relative;
padding:35% 0 0;
z-index: -1;
}
#video-background {
position: absolute;
top: 0;
left: 0;
right:0;
bottom:0;
overflow: hidden;
z-index: -1;
}
video {
display: block;
width: 100%;
height: auto;
}
.mega {
overflow: hidden;
}
.mega:before {
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.mega:after {
content: "";
background-size: 3px 3px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.caption a {
color: #fff;
text-transform: uppercase;
border: 2px solid #fff;
padding: 10px;
font-weight: 800;
font-size: 20px;
}
.mega .caption {
display: table;
width: 100%;
max-width: 24em;
height: 100%;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 2;
text-shadow: 0 1px 5px rgba(0, 0, 0, .5);
}
.mega .caption > div {
text-align: center;
display: table-cell;
vertical-align: middle;
padding: 0 2em;
}
.mega h1 {
color: #fff;
text-transform: uppercase;
font-weight: 900;
font-size: 32px;
margin-bottom: 150px;
}
@media all and (max-width: 500px) {
.desc, .meta, .tools, .nav-icon {
display: none !important;
}
.title {
text-align: left !important;
letter-spacing: 1px;
}
#video-viewport video {
display: block;
width: 100%;
}
.mega {
background:url(../img/home.jpg) no-repeat center center fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
height: auto;
width: auto;
}
}
.banner {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<section class="mega">
<div id="video-viewport">
<video autoplay loop id="video-background" >
<source src="video/fbvideo.mp4" type="video/mp4" />
<source src="video/fbvideo.webm" type="video/webm" />
</video>
</div>
</section>
<p>content</p>
</body>
</html>
I suggest you save that file and just run it as it is making sure it is linked to your video so you can see how it works and if it’s of any use.
thank you so much for help @PaulOB , issue is solved.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.