如何确保HTML视频标签的最大高度

如何解决如何确保HTML视频标签的最大高度

我正在一个示例网站上尝试通过HTML和CSS改进我的布局技能。我正在使用SCSS来编译我的CSS，直到创建Navbar为止，并且遇到了一些麻烦。

Here's a codepen of my website (just HTML and SCSS for now。我的目标是使示例.mp4视频（在视频代码内部，而不是iframe）的最大高度大约为50％左右，因此，如果要拉伸浏览器，则宽度不会受到影响，但高度最终将最大化。

我还试图使页面顶部的导航栏浮动在视频顶部上方（我使用RGBA值使其看起来有些透明）；但是，它看起来像一个块级元素。我试过使用float，display：inline / inline-block，并将视频代码的z-index设置为-1；但是，我似乎无法使导航栏浮动在视频标签上方，而不是位于视频标签上方。

没什么大不了的，但是在视频正下方显示了导航（父元素）的一些背景。导航上没有填充，视频上也没有空白，所以我不知道它来自哪里。在开发工具中检查元素时，它表明紫色背景确实是NAV，但其填充为0，边距为0。任何见解将不胜感激。

这是来自代码笔的代码：

HTML：

  <header>
    <nav class="main-nav">
    <div class="container flex">

      <h1 class="logo"><a href="index.html">Logo Here</a></h1>
      <div class="nav-collapse-container">
        <div class="nav-collapse-bar"></div>
        <div class="nav-collapse-bar"></div>
        <div class="nav-collapse-bar"></div>
      </div>
      <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="biography.html">Bio</a></li>
        <li><a href="location.html">Location</a></li>
        <li><a href="media.html">Media</a></li>
      </ul>
      </div>
      <video autoplay muted loop class="header-video">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        <!--<source src="../video/running_beach_loop.mp4" type="video/mp4">-->
        Your browser does not support the video tag
      </video>
    </nav>
  </header>
  <main class="container">
    <h1>Company Name</h1>
    <h3>Lore Ipsum</h3>
  </main>

SCSS：

  /* sass --watch scss/style.scss css/style.css */

  /* Imports */
  //Google Fonts
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

  /* Colors */
  $primary-color: #f9f9f9;
  //$secondary-color: #2a78f5;
  $secondary-color: rgba(42,120,245,.3);

  /* BreakPoints */
  $phone-breakpoint: 640px;
  $tablet-breakpoint: 1007px;

  /* Fonts */
  $font-stack: 'Roboto',sans-serif;


  /* Media Query Mixins */
  @mixin phone{
      @media only screen and (max-width: $phone-breakpoint){
          @content;
      }
  }

  @mixin tablet{
      @media only screen and (min-width: $phone-breakpoint + 1) and (max-width: $tablet-breakpoint){
          @content;
      }
  }

  @mixin desktop{
      @media only screen and (min-width: $tablet-breakpoint + 1){
          @content;
      }
  }


  *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: $font-stack;
  }

  body{
      background-color: $primary-color;
      font-family: $font-stack;
      line-height: 1.6;
  }

  a{
      text-decoration: none;
      color: $primary-color;
  }

  li{
      list-style: none;
  }

  header video{
      width: 100%;
      max-height: 100%;
      //float:left;
      z-index: -1;
      margin: 0;
  }

  nav{
      background-color: $secondary-color;
      color: $primary-color;

      .nav-collapse-container{
          display: none;
      }

      .flex{
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      ul{
          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      ul li{
          margin: 0 .75em;

          &:hover{
              border-bottom: .1em solid $primary-color;
          }
      }

      @include phone{
          ul{
              display: none;
          }

          .nav-collapse-container{
              display: flex;
              flex-direction: column;
              align-items:center;

              &:hover + ul{
                  display: flex;
                  flex-direction: column;
                  align-content: center;
                  overflow: visible;
              }

          }

          .nav-collapse-bar{
              width: 1.75em;
              height: .35em;
              background-color: $primary-color;
              margin: .1em;
              border-radius: 2.5px;
          }

      }

      .container{
          height: 5em;
      }
  }


  .container{
      max-width: 95%;
      margin: 0 auto;
      padding: 0 3%;
  }