Почему блок не резиновый?

<div id="trailer">
    <video autoplay width="85%" loop poster="images\poster.jpg">
        <source src="video/nature.mp4" type='video/mp4'>
    </video>
    <div class="blackout">
        <div class="hi">Hi</div>
    </div>
</div>

.trailer {
  position: relative;
}

.blackout {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 87.5%;
  margin-left: 6.25%;
  margin-right: 6.25%;
  text-align: center;
  background: rgba(0, 0, 0, 0.65);
  display: inline-block;
  mix-blend-mode: multiply;
  height: 99%;
}

.hi {
  margin-top: 5%;
  font-weight: bolder;
  font-size: 35vw;
  color: #fff;
}
#trailer{
  z-index: 2;
  margin-bottom: 0;
}
#trailer video {
  color: #000;
  width: 87.5%;
  position: relative;
  z-index: 0;
  margin-left: 6.25%;
  margin-right: 6.25%;
  top: -10px;
  margin-bottom: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}