Bootstrap заголовок видео

Question

Я использую Bootstrap -4 для макета веб-страницы. У меня проблемы с созданием блока под моей навигационной панелью, где я хотел бы, чтобы видео-фон воспроизводился слева, а некоторый контент справа, но разбивался нестандартным блочным способом. (извините за описание) Картинка стоит 1000 слов, что-то вроде ниже.

Белые загогулины - это то место, где я хотел бы создать белое наложение, разбивающее страницу на более современная мода.

Я полагаю, что я хочу сделать, это использовать SVG, чтобы добавить белое наложение поверх видеофайла? Но, похоже, я никак не могу разобраться с этим.

Это мой код в настоящее время:

<main>
<section id="video-header">
  <div class="overlay"></div>
    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
      <source src="MSP.mp4" type="video/mp4">
    </video>
  <div class="container-fluid">
    <div class="row">
      <div class="col-8">

      </div>
      <div class="col-4">

      </div>
    </div>
  </div>

</section>

С css, установленным как

#video-header video {
height:700px;
position: absolute;
}

Я нашел этот ресурс, но, похоже, просто не могу его рассердить. https://css-tricks.com/creating-non-rectangular-headers/ Особенно в отношении создания макета, отвечающего разным размерам страниц!

Может ли кто-нибудь дать мне какие-нибудь указатели?

(кроме того, мое видео, кажется, сидит поверх тени navbar? У кого-нибудь тоже есть указатели? - пробовал z-index -1)

Используя пример на Как нарисовать фигуру на видео HTML5 с использованием SVG? Я настроил свой код следующим образом.

<main>
<section id="video-header">
<div>
  <video id="videoContainer" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
    <source src="MSP.mp4" type="video/mp4">
  </video>
  <svg id="svgContainer" width="700px">
    <polygon fill="white" points="1244,0 1150,600 1244,700"/>
  </svg>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-8 d-flex align-items-center justify-content-center">
      col-8
    </div>
    <div class="col-4 d-flex align-items-center justify-content-center">
      <p class="mt-5">
        <span class="reenie-title ">Using Sail Training to Inspire & Change Lives</span>
        Morvargh Sailing Project is a registered not-for-profit (CIC) and volunteer led Sail Training organisation.
        We provide life changing sail training voyages for 14 to 25 year old’s which are subsidised and cost just £65 per day.
        Information on financial support for our voyages is available upon request.
        We also provide a limited number of corporate and private events help subsidise our sail training voyages.
        <br />
        <span class="btn btn-lg btn-primary mt-4">Find a Voyage</span> <span class="btn btn-lg btn-primary mt-4 ml-4">Volunteer</span> <span class="btn btn-lg btn-success mt-4 ml-4 text-white">Donate</span>
      </p>
    </div>
  </div>
</div>

И CSS как

#video-header video {
height:700px;
position: absolute;
z-index:1;
}

#svgContainer {
position: absolute;
width:100%;
height:100%;
z-index:2;
}

Может ли кто-нибудь дать мне указание, почему текст с правой стороны это не кликабельно? Должен быть что-то связанное с моими z-индексами ?? И я не могу выровнять текст по центру вертикально?