Steps for integrating a video into the Bootstrap navigation bar

I've been working on a Bootstrap menu design that features text on the left side and a video on the right. My goal is to make the video extend to the top of the page with a button overlaid, similar to the image I have in mind. However, I've encountered some challenges while trying to achieve this. Problems arose where the button was not accessible from the hamburger menu or positioning issues occurred due to interference from content on the right side. For further reference, I've provided a link to CodePen.

Desired Outcome:

https://i.sstatic.net/rarr1ekZ.png

  
.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f5eef3eef3">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e5c51514a4d4a4c5f4e7e0b100d100d">[email protected]</a>/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>

htmlcssbootstrap-4bootstrap-5navbar

Answer №1

 .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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1849f829f82">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d3c8d5c8d5">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to incorporate text at the end of a row in HTML?

I have a photo and some text on my website. The photo is displayed on the left side, while the text appears nicely on the right side. Now, I am looking to include an additional block of text below the existing text. How can I accomplish this? What steps ...

javascriptcsshtml-table

Extracting the inner content in the absence of an HTML element, only plain text

My website's platform has some unusual HTML that I need to work with. There is a section of code that looks like this: <div class="report-description-text"> <h5>Description</h5> Welcome to Ushahidi. Please replace this report with a ...

javascripthtml

The frozen first column in a CSS table does not have consistent height with the rest of the row

Having trouble with freezing the first column of a table and aligning the height of the first cell with the rest of the row? Check out the issue in the image below: https://i.sstatic.net/v5xHU.png For a live example, you can also visit this jsfiddle link ...

htmlcss

Using Selenium with Java to interact with elements on a webpage, I encountered an issue where I was unable to click

I utilize Selenium for purposes other than web testing; my main goal is to extract and modify text from a website. Specifically, I use it within an additional editor to manipulate content on Confluence. The text I extract often contains various formatting ...

javahtmlseleniumweb-testing

Tips on widening a paper to its fullest width while also keeping it versatile and adaptable

How can we ensure that in a React application using Material-UI, the width of a paper always expands to a maximum of 600px, regardless of the width of its contents? We also want to keep the paper flexible, so that when the parent container's width shr ...

cssreactjsflexboxmaterial-designmaterial-ui

Executing PHP queries with the help of jQuery

Currently, I am developing a webpage that involves checking a checkbox to trigger a PHP function which queries the table for user existence. If the user exists, a button is displayed allowing them to proceed to the next page. I have made an attempt at thi ...

phpjqueryhtmlajax

Vertical stacks of DIVs suddenly vanish

I am currently creating a map grid using HTML/CSS with the following layout: #map { position: absolute; top: 2vw; bottom: 2vw; left: 2vw; right: 2vw; overflow: visible; background : blue; } .map-row { width: 100%; ba ...

htmlcss

JavaScript is failing to match the float and string values

Trying out this code snippet: if(total === balance) { alert("test passed"); } else { alert("test failed"); } In this scenario, total = 10; and balance = 10.00;, yet the output is "test failed". ...

javascripthtmlfloating-pointinteger

How can I ensure that the height of my dropdown menu covers the entire screen without being limited by the page height

I'm trying to adjust a dropdown menu so that it fits perfectly within the screen size, covering the entire height without showing any content beneath or below it. Currently, the menu covers the screen on some pages but scrolls and appears too large du ...

javascripthtmlcss

What is the method for retrieving the active element with Waypoint?

Currently, I am implementing Waypoint (version 7.3.2) in my React project using React version 16. My goal is to create a scrollable list of items where each item fades out as it reaches the top of the container div. My main inquiry is how can I obtain a re ...

javascripthtmlcssreactjsjquery-waypoints

How come the margin-bottom is displaying as the margin-top?

When I attempt to add margin-bottom on a div inside its parent, it seems to display as the parent's margin-top. Why is that? HTML: <div id="wrapper"> <div id="content"> <div id="box"></div> </div> </d ...

htmlcss

Creating a background color without using the <canvas id> element can be achieved by utilizing CSS properties such as

As a novice in the world of HTML and CSS, I find myself working on creating my website using HTML. Upon inspecting my site, I notice that the default background color is white. Despite trying to change it by using #canvas { background-color: black; } in ...

htmlcssbackground-color

css - Tips for reducing the speed of inertia/momentum scrolling on mobile devices

I have been working on creating a scrollable card gallery using a CSS grid layout. The structure I am following is similar to this: <div class="gallery-wrapper"> <div class="gallery-container"> <div id="card-1" class="gallery-ca ...

htmlcssscroll

Ways to turn off JavaScript when reaching a certain breakpoint, similar to a media query

I am facing an issue with my <header> and <nav> blocks which are impacted by JavaScript. Is there a way to create a JavaScript solution similar to a media query that would deactivate this JavaScript code if the window width is less than or equa ...

javascriptjqueryhtmlcss

What element is lacking in this Bootstrap 4.5 and Scroll Spy demonstration?

What could be causing this HTML snippet to malfunction? The Scroll Spy feature remains inactive. <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid ...

bootstrap-4

Creating multiple thumbnails and storing them in various folders using CodeIgniter

I am looking to organize my images into different folders - one for original pictures and another for thumbnails. However, when I try to upload an image to the thumb directory, it shows up as empty. https://i.stack.imgur.com/5Fybz.png Below is the code s ...

phphtmlcodeigniter

Experimenting with combining a CSS class alongside the Nth-child selector

Hello, I've been researching various sources including Stackoverflow on how to effectively use an Nth child selector and a Class together but have not had much success so far. In essence, my menu consists of Main categories (class = cat) and subcateg ...

csscss-selectors

What is the approach for incorporating JavaScript variables in Jade templates for writing inline CSS styles?

Struggling to inject CSS code dynamically? You're not alone. style(type='text/css') #header a#logo { background:url(constants.logo) no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #header a#logo { ...

cssnode.jspug

Can a TypeScript variable in Angular contain a mixture of HTML and plain text?

I have a website where I am displaying content from a Model file. I would like to create a TypeScript variable that contains both a string related to the website's content and a URL enclosed in an HTML tag. When this variable is rendered on the view, ...

htmlangulartypescript

Adjusting the size of content with CSS

I've been attempting to get an image to cover the entire screen on a device using CSS, but so far I haven't had any success. The image is within an :after pseudo element and content tag. Since it needs to be laid over the HTML, I can't use t ...

htmlcss