i want to create a video container that covers the whole screen
and the video inside the container covers the whole container and doesn't overflow means container adapts the whole screen size.
and is responsive accordingly.
currently the video is taking its full height..i don't want that
i want its height to be limited to the screen size and there is no scroll.
my html code is
<div class="video-container">
<div class="video-wrapper">
<video autoplay controls>
<source src="../../assets/movies/joker.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
my css code is :
.video-container {
display: block;
max-width: 100%;
min-width: 200px;
}
.video-wrapper {
background: #000;
border-radius: inherit;
overflow: hidden;
position: relative;
z-index: 0;
}
.video-container video {
border-radius: inherit;
height: auto;
vertical-align: middle;
width: 100%;
}
video {
max-width: 100%;
object-fit: contain;
}
please help me with this problem..thanks in advance.
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
video {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
HTML:
<body>
<script src="./index.js"></script>
<video autoplay controls>
<source src="../../assets/movies/joker.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
A meta tag like this helps:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You need to change your width and height, CSS features the possibility for view height and view width, so it fits the screen. As already mentioned above:
.video-wrapper{
height: 100vh;
width: 100vh;
}
Related
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top-rated-container-1 {
width: 100%;
margin: 0 auto;
}
.video-container {
width: 100%;
border: 1px solid black;
}
.video-container video {
width: 100%;
height: 250px;
}
<section class="top-rated-container-1">
<div class="video-container">
<video autoplay="" loop="" muted="" playsinline=""
poster="https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e">
<source src="https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2"
type="video/webm">
<source src="https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b"
type="video/mp4">
</video>
</div>
</section>
I have a video element in my HTML code and I have specified its width to be 100% in the CSS. However, the video is not taking up the full width of its container and I cannot figure out why. I have tried overriding conflicting styles and checking the width of the parent container, but the issue persists. I am looking for a solution to make the video element take up 100% of the width of its container.
I have tried specifying the width of the video element to be 100% in the CSS and also tried setting an absolute value for the width using pixels. I expected the video to take up the full width of its container, but it did not. The video element is not stretching to fill the width of the container, and I am not sure what is causing the issue.
I also tried setting the height of the video element to auto, but it still took the height of the entire screen. I kinda like to have a certain height but stretched 100%, like the photo below.
The output should look like this.
You need to add object-fit: fill to the <video>:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top-rated-container-1 {
width: 100%;
margin: 0 auto;
}
.video-container {
width: 100%;
border: 1px solid black;
}
.video-container video {
width: 100%;
height: 250px;
object-fit: fill;
}
<section class="top-rated-container-1">
<div class="video-container">
<video autoplay="" loop="" muted="" playsinline=""
poster="https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e">
<source src="https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2"
type="video/webm">
<source src="https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b"
type="video/mp4">
</video>
</div>
</section>
EDIT: since OP edited the question, seems like object-fit: cover is what's needed here:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top-rated-container-1 {
width: 100%;
margin: 0 auto;
}
.video-container {
width: 100%;
border: 1px solid black;
}
.video-container video {
width: 100%;
height: 250px;
object-fit: cover;
}
<section class="top-rated-container-1">
<div class="video-container">
<video autoplay="" loop="" muted="" playsinline=""
poster="https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e">
<source src="https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2"
type="video/webm">
<source src="https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b"
type="video/mp4">
</video>
</div>
</section>
Just to add, if you want to make the video element responsive, you can use CSS object-fit. You can set the object-fit property to "cover" which will stretch the video to fill the container while maintaining its aspect ratio:
.video-container video {
width: 100%;
height: 150px;
object-fit: cover;
}
Or you can set object-fit property to "contain" which will scale the video down to fit inside the container while maintaining its aspect ratio:
.video-container video {
width: 100%;
height: 150px;
object-fit: contain;
}
If you want to make the video Responsive and don´t wanna give a height (this can be the case for obvious reasons) you can use the aspect-ratio property. (this is always a good idea :))
If you want to take just 250px in height from the video, its a better idea to give the parent element the 250px. so the video wouldnt be stretched out.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top-rated-container-1 {
width: 100%;
margin: 0 auto;
}
.video-container {
width: 100%;
border: 1px solid black;
height:250px;
display:grid;
place-items:center;
overflow:hidden
}
.video-container video {
width: 100%;
height:auto;
aspect-ratio: 308 / 125;
object-fit:fill
}
<section class="top-rated-container-1">
<div class="video-container">
<video autoplay="" loop="" muted="" playsinline=""
poster="https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e">
<source src="https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2"
type="video/webm">
<source src="https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b"
type="video/mp4">
</video>
</div>
</section>
Issue in the code : You have set a height to the video. you can set it to auto or try object-fit: cover;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top-rated-container-1 {
width: 100%;
margin: 0 auto;
}
.video-container {
width: 100%;
border: 1px solid black;
}
.video-container video {
width: 100%;
height: 250px;
object-fit: cover;
}
<section class="top-rated-container-1">
<div class="video-container">
<video autoplay="" loop="" muted="" playsinline="" poster="https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e">
<source src="https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2"
type="video/webm">
<source src="https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b"
type="video/mp4">
</video>
</div>
</section>
If you need a solution without changing the height please comment below. I'll find a solution. Thanks :)
I need to put video inside parent div to match its (div's) dimensions.
Specifically, I'm looking for full width and a fixed height.
Below code doesn't seem to be working.
HTML:
<div id="video-bg">
<video autoplay muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
CSS:
#video-bg {
width: 100%;
height: 200px;
}
div#video-bg video {
object-fit: cover;
}
Codepen:
https://codepen.io/aartiik/pen/ErJRJK
The container .bkg is display:flex and align-items: stretch -- which makes its child tag (.vid) vertically stretch to the edge of the containing tag and comply with max-height: 200px (normally this is true but this particular layout is an exception, see footnotes1)
The video is assigned object-fit: cover which sets the video edges to the edge of the container without distortion and if its Aspect Ratio doesn't fit within its containing tag, it will extend its edges past the container borders as needed. Also object-position: center is explicitly set.
1This particular layout has a side-effect in that it adds an extra 20px in height when video is assigned object-fit: cover. Therefore the height of .bkg is 180px as an offset. Setting object-fit to fill will fix that behavior.
Demo
:root {
font: 400 16/1.3 Consolas;
}
html,
body {
width: 100%;
height: 100%;
}
body {
overflow: hidden;
}
.bkg {
display: flex;
align-items: stretch;
justify-content: center;
max-height: 200px;
height: 180px;
width: 100%;
overflow: hidden;
margin: 0 auto;
}
.vid {
display: block;
object-fit: cover;
object-position: center;
width: 100%;
}
<div class="bkg">
<video class='vid' autoplay muted loop playsinline>
<source src='https://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'>
</video>
</div>
add class to your video then style the video:
HTML:
<div id="video-bg">
<video class="vid" autoplay muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
CSS:
#video-bg {
width: 100%;
height: 200px;
}
div#video-bg video {
object-fit: cover;
}
.vid{
width: 100%;
height: 100%;
}
I want to make background video for the website. Whatever I am doing there is a gap in the top and left sides. I changed the width left position anyway the error still is same. Please find the print screen from the website. I also attached my CSS and HTML code. Thank you for reading.
CSS:
header-container {
width: 90%;
height: 900px;
border-left: 1%;
border-right: none;
position: relative;
padding: 20px;
}
.video-container {
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -1;
width: 100%;
}
HTML:
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay = "autoplay" loop = "loop" muted>
<source src="video/test.mp4" type="video/mp4" >
</video>
</div>
</div>
https://ibb.co/incNY5
You have padding in heading-container. Set it 0px.
I'm more backend guy than frontend, so if you consider my question as dummy, sorry for that, but I couldn't find answer :)
My aim is to have background video with parallax using CSS. In general I did manage to do that, but result is not good enough. Because of some reason, video which is in background is under all sections, instead of being in just one section where it supposed to be...
HTML:
<div class="fullScreenPhoto"></div>
<div class="video-container">
<video autoplay poster="" class="video-parallax" loop muted>
<source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/webm">
<source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/mp4">
</video>
</div>
<div class="fullScreenPhoto2"></div>
<div class="fullScreenPhoto3"></div>
CSS:
body{
margin: 0;
padding:0
}
.fullScreenPhoto{
width: 100%;
margin:0;
height:300px;
background-color: red;
}
.fullScreenPhoto2{
width: 100%;
height:300px;
margin:0;
background-color: green;
}
.fullScreenPhoto3{
width: 100%;
margin:0;
height:300px;
background-color: yellow;
}
video {
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
transition: 1s opacity;
}
.video-container {
height: 600px;
}
.video-parallax {
-webkit-transition-position: fixed;
position: fixed;
}
Here you can fiddle:
Fiddle
where I've duplicated my issue. If you will hide one section, or change z-index for higher, you are able to see, that video is all over the page...
BTW. I know about plugin jQuery -> https://github.com/linnett/backgroundVideo, but I would like to use just CSS.
You can easily do this as you do with image parallax.
The HTML:
<div class="ParallaxVideo">
<video autoplay muted loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
<h1>Video Background</h1>
</div>
The CSS
.ParallaxVideo{
height: 300px;
padding-bottom: 50px;
padding-top: 50px;
}
.ParallaxVideo video{
min-width: 100%;
position: fixed;
top:0;
z-index: -999;
}
.ParallaxVideo h1 {
color: #fff;
font-size: 76px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
}
You can also take a look this tutorial for more details:
https://codeconvey.com/video-parallax-background-using-css3/
Here is demo version:
http://codeconvey.com/Tutorials/VideoParallaxBackground/
If you want video to be background only for this one div then you couldn't have parallax effect, because then you need remove position: fixed for .video-parallax (so all styles for this class as I see) and change styles for video to that:
video {
margin:0 auto;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
transition: 1s opacity;
}
You need to set a css height for the video element, or on the element itself like <video height="400">. Updated Fiddle.
For this purpose I am using Materialize CSS. It is straightforward. We want a video as background parallax CSS.
HTML WITH MATERIALIZE CSS
<style>
#anyvideo{
position: absolute;
right: 0;
bottom: 0;
min-width: 10%;
min-height: 100%;
}
</style>
<div class="video-container parallax-container">
<video autoplay muted loop id="anyvideo">
<source src="somevideo.mp4" type="video/mp4">
</video>
</div>
We can also make our video responsive i.e. adjust to screen size accordingly.
<div class="video-container parallax-container">
<video autoplay muted loop id="anyvideo" class="responsive-video">
<source src="somevideo.mp4" type="video/mp4">
</video>
</div>
In the above code only the class="responsive-video" has been added and that makes the video responsive.
I'm trying to create a website in which the background is a video. I've been searching for days on how to recreate something like Spotify's homepage background but cannot seem to make it work.
My problem is that I can either get the height to scale with the browser, or the width, but not both. Unlike the video on Spotify's website, it doesn't scale to fit the browser at all times. I've tried many things, and most of them I can't remember. I don't mind using JQuery to achieve this effect.
My current code is:
<!DOCTYPE html>
<html>
<head>
<title>VideoBG</title>
<style type="text/css">
#videohome {
position:absolute;
height: 100%;
width: 100%;
top:0;
left:0;
right:0;
bottom:0;
}
</style>
</head>
<body>
<video id="videohome" preload="auto" autoplay="true" loop="loop" muted="" volume="0">
<source src="./homepage.mp4" type="video/mp4" />
</video>
</body>
</html>
You will need to have a container div, which fits to the screen, and then add a class to the video which will resize it to width or height.
CSS:
.container {
width: 100%;
height: 100%;
position: absolute;
padding:0;
margin:0;
left: 0px;
top: 0px;
z-index: -1000;
overflow:hidden;
}
.videoPlayer {
min-height: 100%;
//min-width:100%; - if fit to width
position:absolute;
bottom:0;
left:0;
}
HTML:
<div class="container"><video class="videoPlayer">Code goes here</video></div>
Use object-fit: cover in the container
Oldie but a goldie. Have been struggling with this myself but found that aspect-ratio media queries do the job nicely.
If media queries aren't supported, the video will still cover the page but won't scale properly.
If translateX, translateY or #supports isn't supported, the video won't be centered.
HTML:
<div class="cover">
<video autoplay loop mute poster="path/to/image.jpg">
<source src="path/to/video.mp4" type="video/mp4" />
<source src="path/to/video.webm" type="video/webm" />
<source src="path/to/video.ogv" type="video/ogg" />
<img src="path/to/image.jpg" alt="" />
</video>
</div>
CSS:
.cover {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.cover img, .cover video {
display: block;
height: auto;
left: auto;
max-width: none;
min-height: 100%;
min-width: 100%;
right: auto;
position: absolute;
top: 0;
width: auto;
z-index: 1;
}
#supports (transform: translateX(-50%)) {
.cover img, .cover video {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
#media screen and (min-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */
.cover img, .cover video {
max-width: 100vw;
min-width: 100vw;
width: 100vw;
}
}
#media screen and (max-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */
.cover img, .cover video {
height: 100vh;
max-height: 100vh;
min-height: 100vh;
}
}
I found this:
http://wesbos.com/css-object-fit/
Use object-fit: cover; on your video tag
It worked for me.