如何在 Bootstrap 导航栏中嵌入视频？

问题描述 投票：0回答：1

我有一个使用 Bootstrap 创建的简单菜单。左边是文字，右边是视频。我想实现视频延伸到页面顶部，上面有一个按钮，如图所示。我尝试了很多方法，但不幸的是，我无法解决它。问题要么是汉堡菜单中右侧的按钮无法访问，要么如果可以，则汉堡菜单的位置不正确，因为右侧的内容干扰了它。 我为其创建了一个 codepen 链接。

我想要实现的目标：

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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

html css bootstrap-4 bootstrap-5 navbar
1个回答
0
投票

 .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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.