Градиент над видео?

Question

У меня проблемы с созданием фонового видео на моем веб-сайте, и я хочу добавить градиент над ним, как показано на рисунке ниже.(Очевидно, вы не можете видеть, как видео движется, поэтому вот ссылка . Это тема WP.)

Iуже есть видео, и мне просто нужно добавить градиент.

Любые предложения о том, как это сделать?

Вот мой код:

(Это смесь HTML иPug) Файл Index.pug:

    //- Video background
    .section
        h1 Together We Build Dreams
        .video-container
            <video autoplay loop muted>
                <source src="video.mp4" type="video/mp4">
            </video>

Файл Style.scss:

.video-container {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: ' ';
    z-index: 2;
    backface-visibility: hidden;
    background: #3452ff;
    background: linear-gradient(135deg,#3452ff 0%,#ff1053 100%);
    opacity: 0.8;
}

.section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
    h1 {
        text-align: center;
        font-size: 4rem;
        color: white;
        padding: 20px;
        margin: 15px;
        z-index: 1;
    }
}

PS Если вам нужна дополнительная информация, пожалуйста, скажите мне, как я могу улучшить и отредактировать ее.Спасибо!?

Answer 1

Пожалуйста, добавьте HTML и CSS.

<div class="bg-overlay"></div>

.bg-overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: ' ';
  z-index: 2;
  backface-visibility: hidden;
  background: #3452ff;
  background: linear-gradient(135deg,#3452ff 0%,#ff1053 100%);
  opacity: 0.8;
}