* {
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 :)
Related
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;
}
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 am facing a problem, that I cannot make object-fit: cover; work with video tag because it is overlays outside the parent container, even if I use object-fit: cover;
Only one solution works: add a border-radius with some value, like:
border-radius: 10px;
to the video tag css.
Working example:
https://codepen.io/anon/pen/qmrvLB
Comment in or out border-radius: 10px; line to see what is my problem.
If using border-radius: 1px; (and no one will see that radius) feels too hacky, use a wrapper
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 50%;
height: 50px;
overflow: hidden;
}
video {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="wrapper">
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
</div>
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.
Im trying to get a video as a background in a div tap like (plated.com) here is what i got i cannot get the video inside the div, it keeps going full screen.
<section>
<div id="video-container">
<video id="bgvid" autoplay poster="images/logo.png" muted>
<source src="videos/allyouneed.mp4" type="video/mp4"/>
</video>
</div>
</section>
#video-container{
position: absolute;
min-width: 100%;
max-height: 500px;
border: 2px green solid;
}
video#bgvid{
position: relative;
min-width: 100%;
min-height: 100%;
z-index: -100;