Текст на фоне видео становится непрозрачным

Question

Я использую видео фон с текстовым заголовком посередине.Когда у меня нет видео в тексте белого цвета, но как только я добавляю видео, белый текст становится непрозрачным, я не хочу этого.HTML;

  <div class="top-content">
    <div class="container">
    <video autoplay muted>    
        <source src="videoone.mp4" type="video/mp4">
      </video>
      <div class="row">
        <div class="col-sm-12 text wow fadeInDown">
          <h1>Made to Represent</h1>
        </div>
      </div>
    </div>
  </div>

Я пытался использовать !important в CSS на соответствующих настройках.Здесь я собрал упрощенную версию для codepen - https://codepen.io/grabthereef/pen/xyQzNj

Что-то мне не хватает?

Answer 1

Удаление z-index: 1 из раздела .top-content video CSS будет лучшим способом решения проблемы.Следующим образом:

.top-content video {
  position: absolute;
  left: 0;
  top: 0;
  width:100%;
  height:100%;
  /*  object-fit is not supported on IE  */
  object-fit: cover;
  opacity:0.7;
}

Answer 2

Попробуйте добавить положение: абсолютное и добавить z-index: 999 к вашему классу

.top-content .text h1 {
    letter-spacing: 24px;
    font-weight: 400;
    font-size: 48px;
    text-transform: uppercase;
    color: #fff;
    position: absolute;
    z-index: 999;
}