CODEWITHSUNDEEP
htmlcss
Adrian Gaile Singh
Adrian Gaile Singh

Reputation: 380

CSS video not stretching to 100% width of parent container

* {
    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. enter image description here

Upvotes: 2

Views: 5650

Answers (5)

Bradley Dishner
Bradley Dishner

Reputation: 1

* {
    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>

Upvotes: -1

Adrian Gaile Singh
Adrian Gaile Singh

Reputation: 380

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;
}

Upvotes: 4

Pathum Bandara
Pathum Bandara

Reputation: 363

  • 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 :)

Upvotes: 1

prioa
prioa

Reputation: 79

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>

Upvotes: 1

Damzaky
Damzaky

Reputation: 10826

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>

Upvotes: 2

Related Questions