BBDev BBDev - 27 days ago 6
CSS Question

How do I create full width video similar to graphicstock.com's video banner?

I created a small video banner in After Effects and am trying to make it look like graphicstock.com's with full width and 1/3 height but it's not showing full width and is height is too big.

<div id="home" class="container ">
<div class="banner">
<div class="gs-homepage-redesign video-holder">
<div class="video-wrapper">
<video class="gs-homepage-redesign video" autoplay loop muted>
<source src="Comp 1.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="Comp 1.webm" type='video/webm'>
<source src="Comp 1.mp4" type='video/mp4'>
</video>
</div>
</div>
</div>


and CSS

.banner .gs-homepage-redesign.video {
flex: none;
object-fit: cover;
width: 100%;
min-width: 350PX;
min-height: 200px;
}
audio, canvas, progress, video {
display: inline-block;
vertical-align: baseline;
}

.banner {
position: relative;
z-index: 10;
min-height: 300px;
padding: 0 0;
}

.banner .gs-homepage-redesign.video-holder {
position: relative;
overflow: hidden;
height: 500px;
color: #fff;
}

Answer

Here you go:

.banner .gs-homepage-redesign.video {
  flex: none;
  object-fit: cover;
  width: 100%;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
video {
  background-color: red;
  width: 100;
  height: 30vh;
  min-height: 300px;
}
.banner {
  position: relative;
  z-index: 10;
  padding: 0 0;
}
.banner .gs-homepage-redesign.video-holder {
  position: relative;
  overflow: hidden;
  color: #fff;
}
<div id="home" class="container ">
  <p>content befor video</p>
  <div class="banner">
    <div class="gs-homepage-redesign video-holder">
      <div class="video-wrapper">
        <video class="gs-homepage-redesign video" autoplay loop muted>
          <source src="Comp 1.ogv" type='video/ogg; codecs="theora, vorbis"' />
          <source src="Comp 1.webm" type='video/webm'>
            <source src="Comp 1.mp4" type='video/mp4'>
        </video>
      </div>
    </div>
  </div>
  <p>content after video</p>
</div>

Comments