How to put navbar with video background?

I am new to Bootstrap and I have tried to implement a code as navbar with video background.

What I have tried:

HTML Code:

<html>
  <head>
    <title>Medical</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="CSS/wstyle.css">
  </head>
  <body>
    <section class="section-header">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <a class="navbar-brand" href="#">
                <img src="images/LOGO.png" style="width:60%" ;>
              </a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
                  <li class="nav-item pl-4 pl-2 active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
                    </a>
                  </li>
                  <li class="nav-item pl-4 pl-2">
                    <a class="nav-link" href="#">About</a>
                  </li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </section>
    <section class="video-bg">
      <div class="container">
        <video id="video" autoplay loop>
          <source src="video/video.mp4" type="video/mp4">
        </video>
      </div>
    </section>
    <div id="location" class="container">
      <img src="images/image1.PNG" alt="IMAGE" width="100%" height="600px">
    </div>
  </body>
</html>

I have included CSS file(wstyle.css) in folder CSS and video(video.mp4) in video folder.

CSS code as:

CSS (wstyle.css)

.video-bg{
  position:fixed;
  z-index: -1;
}

Now, video is playing different in Internet Explorer and Google Chrome, also video is not playing as background to navbar. How to make video play as background to navbar?

Solution

Something like this.

    .navigation{
  padding-top:30px;
  padding-bottom:20px;
  position:absolute;
  top:0;
  width:100%;
  z-index:1;
  background-color: rgba(0,0,0,0.3); /** Change value according to you transperncy**/
}

.navbar-right{
  float:right;
  padding-right:10%;
}

.navbar-right a{
  text-decoration:none;
  padding:10px;
  color: #fff;
  font-family:Arial;
  font-weight:900;
}

.navbar-right a:hover{
  text-decoration:underline;
}
.navbar-logo{
  padding-left:10%;
  font-family:Arial;
  font-size:30px;
  font-weight:bold;
  text-decoration:none;
  color:#fff; 
}

.video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}

#video-bg{
  width:100%;
 
}

.portfolio-section{
  margin-top:50%;
}
.tagline-left{
  float:left;
  width:50%;
  text-align:center;
}

.tagline-right{
  float:right;
  width:50%;
  text-align:center;
}

.tagline-video{
  width:75%;
}

.tagline-right-text{
 position:absolute;
 margin-top:9%;
 text-align:center;
 margin-left:17%;
font-family:Arial;
 color:#fff;
  width:290px;
  font-size:40px;
}

.tagline-left-text{
 position:absolute;
 margin-top:9%;
 text-align:center;
 margin-left:11%;
font-family:Arial;
 color:#fff;
  width:375px;
  font-size:40px;
}
a{
  text-decoration: none  !important;
  
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>


  </style>

<header>
  <div class="header">
    <nav class="navigation">
      <a href="#" class="navbar-logo">Logo</a>
      <div class="navbar-right">
        <a href="#">About</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
      </div>
    </nav>

    <div class="video-container">
      <video autoplay loop muted id="video-bg">

        <source src="//vimeo-hp-videos.global.ssl.fastly.net/3/3.mp4" type="video/mp4">

      </video>
    </div>
  </div>
</header>
</body>
</html>

Let me know it this is what you want