htmlcssbootstrap-4bootstrap-5navbar

How to embed a video within the Bootstrap navbar?

I have a simple menu created using Bootstrap. On the left side, there is text, and on the right side, there is a video. I would like to achieve that the video extends to the top of the page, with a button on it, as shown in the image. I've tried several things, but unfortunately, I couldn't solve it. Either the problem was that the button on the right side wasn't accessible in the hamburger menu, or if it was, then the position of the hamburger menu was incorrect because the content on the right side interfered with it. I created a codepen link for it.

What i would like to achieve:

What i would like

  
.navbar-brand img {
   max-width: 300px; 
  height: auto;
}

.nav-item a {
  margin-right: 15px;
}

.btn-outline-success {
  margin-left: auto; 
}
.video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.video-container video {
  width: 100%;
  height: auto;
}
  
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<body>
   <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container-fluid">
      <!-- Logo -->
      <a class="navbar-brand" href="#">
        <img src="logo.png" alt="Logo" style="max-height: 50px;">
      </a>
      <!-- Hamburger Icon -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- Navbar Links -->
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav me-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
        </ul>
        <button class="btn btn-outline-success" type="button">Contact</button>
      </div>
    </div>
  </nav>

  <!-- Main Content -->
  <div class="container-fluid">
    <div class="row">
      <!-- Left Content -->
      <div class="col-lg-6 content">
        <h3>left contect</h3>
        <p>random text</p>
      </div>
      <!-- Right Content -->
      <div class="col-lg-6 p-0">
        <div class="video-container">
          <video autoplay muted loop>
            <source src="https://videos.pexels.com/video-files/6813964/6813964-hd_1080_1872_30fps.mp4" type="video/mp4">
          </video>
          
        </div>
      </div>
    </div>
  </div>

  
  
</body>

Solution 

  •  .navbar {
      background: transparent;
    }

    .navbar-brand img {
      max-width: 300px;
      height: auto;
    }

    .nav-item a {
      margin-right: 15px;
    }

    .video-container {
      position: absolute;
      top: 0;
      right: 0;
      width: 25%;
      height: 100vh;
      z-index: -1;
    }

    .video-container video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .contact-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 1;
    }

    .content-container {
      padding-top: 56px; /* Adjust based on the height of your navbar */
      height: calc(100vh - 56px);
    }

    .left-content {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<body>
   <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container-fluid">
      <!-- Logo -->
      <a class="navbar-brand" href="#">
        <img src="logo.png" alt="Logo" style="max-height: 50px;">
      </a>
      <!-- Hamburger Icon -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- Navbar Links -->
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav me-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
        </ul>
        <button class="btn btn-outline-success" type="button">Contact</button>
      </div>
    </div>
  </nav>

  <!-- Main Content -->
  <div class="container-fluid">
    <div class="row">
      <!-- Left Content -->
      <div class="col-lg-6 content">
        <h3>left contect</h3>
        <p>random text</p>
      </div>
      <!-- Right Content -->
      <div class="col-lg-6 p-0">
        <div class="video-container">
          <video autoplay muted loop>
            <source src="https://videos.pexels.com/video-files/6813964/6813964-hd_1080_1872_30fps.mp4" type="video/mp4">
          </video>
          
        </div>
      </div>
    </div>
  </div>
</body>