Навигация из меню навигации больше не работает на фоне видео в Chrome

Question

Я столкнулся со странной проблемой только с Google Chrome. По сути, у меня есть меню навигации и добавлена ​​функция наведения. Моя целевая страница имеет несколько разделов, чтобы разделить ее. Первый - это видео фон, следующие 3 - просто фон в качестве фона. До вчерашнего дня все работало нормально, то есть зависание происходило в обоих браузерах и на обоих фонах (видео и обычный цвет).

Однако, при наведении Chrome, на данный момент отображение фона и ссылки больше не работает на фоне видео. Я понятия не имею, почему, потому что я вообще не трогал код моей навигационной панели. Я работал над своим нижним колонтитулом, и вдруг он перестал работать. НО он продолжает работать в Safari.

И указатель мыши и ссылка также будут работать в chrome, когда я прокручиваю вниз до других моих разделов div с простым цветом в качестве фона. Но как только я прокручиваю вверх и панель навигации попадает в область фонового видео, зависание перестает работать.

Я использую WP и добавил шрифт awesome cdn, но я попытался удалить его, и он выиграл не могу решить проблему.

вот мой код панели навигации и видео ::

<div class="video_container">
    <video loop muted autoplay class="video_background">
    <source src="/wp-content/uploads/2020/01/video3.mp4" type="video/mp4">
    </video>
</div>


<div class="main_navigation">

        <nav>

            <ul class="main_nav_ul">
              <li>  <img class="logo_header" src="/wp-content/uploads/2020/01/logo4.svg" alt=""></li>
              <li class="main_nav_li"><a class="main_nav_a" href=" <?php echo site_url('/offer');  ?>" class="navcolor">Offer</a></li>
              <li class="main_nav_li"><a class="main_nav_a" href="<?php echo site_url('/references');  ?>" class="navcolor">References</a></li>
              <li class="main_nav_li"><a class="main_nav_a" href="<?php echo site_url('/portfolio');  ?>" class="navcolor">Portfolio</a></li>
              <li class="main_nav_li"><a class="main_nav_a" href="<?php echo site_url('/about');  ?>" class="navcolor">About Me</a></li>
              <li class="main_nav_li"><a class="main_nav_a" href="<?php echo site_url('/contact');  ?>" class="navcolor">Get in Touch</a></li>
            </ul>
      </nav>

    </div> 


CSS:

.video_container {
  margin: 0;
  display: flex;
}

.video_background {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  width: 100%;
  object-fit: cover;
}



/* Logo Header Styling */

.logo_header {
  height: 25px;
  width: auto;
}

/* Navbar Styling */

.main_navigation {
  opacity: 10;
  top: 4%;
  width: 100%;
  text-align: center;
  position: absolute;
}

.main_nav_ul {
  padding: 0;
  list-style: none;
  width: 100%;
  text-align:center;
  position: relative;
  display: inline-block;

}

.main_nav_li {
  display: inline-block;
  position: relative;
  padding: 1px 0;
}

.main_nav_a {
  color: white;
  font-family: 'Raleway', sans-serif;
  text-decoration: none;
  letter-spacing: 0.15em;
  display: inline-block;
  padding: 15px 20px;
  position: relative;
}



/* Hover Style */

.main_nav_a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: white;
  transition: width 0.5s ease 0s, left 0.5s ease 0s;
  width: 0;
}

.main_nav_a:hover:after {
  width: 100%;
  left: 0;
}