Hovering from Navigation menu does suddenly not work anymore on video background in Chrome

I came across a weird issue only with Google Chrome. Basically, I have a navigation menu and added a hover feature to it. My landing page has multiple divs to section it. The first one is a video background, the next 3 ones are just plain color as background. Up until yesterday everything worked fine, meaning the hovering happened on both browsers and on both backgrounds (video and plain color).

However, today the hovering and link doesn't work anymore on the video background when using Chrome. I have absolutely no idea why because I didn't touch the code of my navbar at all. I worked on my footer and suddenly it stopped working. BUT it does continue to work in Safari.

And the hovering and link will also work in chrome when I scroll down to my other div sections with only plain color as background. But as soon as I scroll up and the navbar gets in the area of the background video section, the hovering stops working.

I am using WP and added the font awesome cdn, but I tried deleting it and it won't fix the issue.

here is my navbar and video background code::

<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;
}