How can i fit this video on the whole screen?
I have used the below code
<style>
*{
margin: 0px;
padding: 0px;
}
#sky-video{
position: fixed;
width: 100%;
height: 100%;
z-index: -100;
}
</style>
<body>
<video src="videos/Sky.mp4" autoplay muted loop id="sky-video">You brower does not support vidoes</video>
</body>
Here you can see there is a gap in right and left of the video.
Is this because the video size is too small to fit in the whole screen?
You may also want to add: object-fit
#sky-video {
position: fixed;
width: 100%;
height: 100%;
z-index: -100;
object-fit: cover;
}
You need to set the width and height for the video container first.
Your container now is then:
body {
display: block;
width: 100%;
height: 100vh;
position: relative;
}
body #sky-video {
width: 100%;
height: auto;
object-fit: cover;
}
Related
I'm using the following code to show a background image on my page:
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
#bg-pic > img {
width: 100%;
display: block;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" />
</div>
This works fine once the ratio of the browser window is wide enough. But in case I have a very small window I want the picture still to cover the page so instead of width: 100%; height: 100%; would be correct. How can I fix this?
EDIT: Since the provided answer don't solve my actual problem let's describe it using an example:
Let's assume my picture has dimensions 100x100 and my browser window has dimensions 200x100. Then only the upper 100 pixels are filled with the picture. What I want is that the whole browser window is filled by zooming into the picture (of course then the area on the right and on the left of the picture which corresponds to the right 25 and left 25 pixels of the picture is omitted).
Use the background property instead of an img element.
Demo:
body {
background: url('image.jpg') center center / cover;
}
jsfiddle
In your case:
html, body {
min-height: 100%;
}
body {
margin: 0;
background: url('bg.jpg') center center / cover;
}
You could use the object-fit and object-position properties on the image tag.
Codepen example
#bg-pic{
top:0px;
left:0px;
position: fixed;
opacity: 0.18;
z-index: -1;
margin: 0px;
width: 100%;
height:100%;
}
#bg-pic img {
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
}
You can read more about object-fit at CSS-Tricks : https://css-tricks.com/on-object-fit-and-object-position/
You just have to add height:100vh; in your img style tag,
You can't use height:100% because it won't be applied unless you have specified static height to parent div.
Always a better option to go for vh dimension.
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" style="width:100%; height:100vh; display: block;"/>
</div>
body { background-image:url("../images/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%; }
Try this
You can try flexbox like this:
#bg-pic {
top: 0;
left: 0;
position: fixed;
opacity: 0.5;
z-index: -1;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}
img {
min-width: 100%;
min-height: 100%;
flex-shrink: 0;
}
<div id="bg-pic"><img src="https://picsum.photos/800/800?image=1069" style="" /></div>
Try this, its cross browser compatible:
div {
position:relative;
}
img {
max-height: 100%;
max-width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
This assumes you have given a size to the div.
You might be looking for background-size: contain. Paired with height: 100vh should give you desired effect.
If you need the image centered horizontally you can add background-position: 50% 0% or background-position: center; for both horizontal and vertical centering.
#container-with-background {
background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg);
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
}
<div id="container-with-background">
</div>
If you need your images to be inside your <img> tags you can achieve the same effect with max-width: 100% and max-height: 100% on the <img> tag, and fixed height on the container - height: 500px for example. Setting the height to 100vh will make it fullscreen.
#container {
height: 100vh; /* Can be set to fixed value if needed */
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
<div id="container">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg">
</div>
How is it possible to make an video fullscreen responsive.
I've tried it with:
video{
width: 100%;
}
And:
video{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
But I've got only problems with that. I can't put stuff below the video, its too big and small screens are not full with the video ...
Screenshot1
Screenshot2
You need to take margins of the body and set video to 100% width, auto height and position relative. codepen example: https://codepen.io/anon/pen/oMQveO
body {
margin: 0;
}
video {
position: relative;
width: 100%;
height: auto;
}
Hello I have a div with a <video> tag in it, and this is set as the background of the div. I have it working but when I go on to create a div below that, the video extends into that div. Basically the video extends beyond its parent container into other divs. It looks like it is taking the full height of the site instead of the full height of the div.
Here is my code:
.banner {
height: 903px;
width: 100%;
}
.banner video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: url() no-repeat;
background-size: cover;
}
<div class="banner">
<video autoplay="" loop="">
<source src="//myvid.mp4" type="video/mp4">
<source src="//myvid.ogg" type="video/ogg">
</video>
</div>
Does anyone know why it is doing this?
Thanks!
change position:fixed to absolute and let the parent container be position:relative
check this snippet
.banner {
height: 200px;
width: 100%;
border: 1px solid green;
position: relative;
}
.banner video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: url() no-repeat;
background-size: cover;
}
<div class="banner">
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<div>
whkjshfdksjhdfksdf
</div>
Hope it helps
You have position: fixed change that to absolute. Since fixed takes the current Display scope seperated from the parent elements. Thus scrolls and takes up everything since you used widht: 100%; height: 100%;
You might also add position: relative; to the banner class so the video has it as a parent.
In addition to changes to defaults, there are changes to position of .banner (relative) and the video (absolute), and the height of the video has been modified to a percentage that maintains a 16:9 aspect ratio. To demonstrate that it covers only it's container(.banner), .banner is set at half the lengths of viewport. Please review the Snippet in Full page mode.
SNIPPET
html,
body {
width: 100%;
height: 100%;
font: 400 16px/1.428 Verdana;
color: #eee;
overflow-x: hidden;
overflow-y: auto;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
outline: none;
}
.banner {
position: relative;
height: 28vh;
width: 50vw;
}
.banner video {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
min-width: 100%;
min-height: 56.25%;
width: auto;
height: auto;
z-index: 0;
/*background: url() no-repeat;*/
background-size: cover;
}
<div class="banner">
<video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" controls>
</video>
</div>
I want a particular picture to cover the entire background of my site and when the window is resized, I want the picture to be scaled accordingly. What I'm looking for is something like https://www.tumblr.com. Notice the picture in the background scales accordingly to the window size.
Here is my css:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#backdrop {
z-index: -999;
min-height: 100%;
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
Where #backdrop is the id for the image I'm using.
I've tried numerous things but nothing seems to change the way my image is displayed.
Use object-fit to let an img behave like a background-image. See this working example:
html, body {
height:100%;
margin:0;
padding:0;
}
img {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<img src="http://lorempixel.com/g/1100/300">
Two things:
Change the height: auto; to height: 100%, and add background styles.
#backdrop {
z-index: -999;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: url("image.jpg") center center no-repeat;
background-size: cover;
}
Also, use a HTML 5 Doctype:
<!DOCTYPE html>
I need to run a video in the background. Requirements are that the video will have to run on 100% width and 600px height/max-height. Here is what i tried to do.
https://jsfiddle.net/yydkd5t4/1/
HTML
<video autoplay loop muted id="video-bg">
<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>
CSS
#video-bg {
position: fixed;
right: 0;
bottom: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {display: block;}
The issue what i am facing is that when i try to fix the height it also scale down the width. Any solution to my problem will highly be appreciated.
After understanding what you are trying to achieve...
You need to add a parent div to the video. Else it will maintain the aspect-ratio and you can't achieve what you want.
#video-bg {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
}
.video-container {
width: 100%;
max-height: 600px;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
z-index: -100;
}
<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->
<div class="video-container">
<video autoplay loop muted id="video-bg">
<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4" />
</video>
</div>
The problem with your current code or any answers till now is that it won't maintain the height: 600px because the video will always maintain his aspect-ratio.
So, you add a parent div with width: 100% and a max-height:600px with overflow:hidden. This way if the video gets a bigger height it will be hidden by the parent div.
This is probably the best way to achieve what you want, but keep in mind it will hide some parts of the video.
Here is your updated code at jsfiddle
Please note that I changed min-height: 100%; to min-height: 600px; and added top: 0;
#video-bg {
position: fixed;
top: 0;
right: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 600px;
z-index: -100;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {display: block;}