Question

我想要的视频元素只有屏幕宽度的70％，但我仍然需要保持高度宽高比100％。现在我有全宽视频作为背景。

我正在使用bootstrap v4。

<body>
 <video poster="assets/img/gpd.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="assets/video/gpd_video.webm" type="video/webm">
</video>
<div class="site-wrapper">
 <div class="site-wrapper-inner">
  <div class="cover-container">
    <div class="masthead clearfix">
      <div class="inner">
        <h3 class="masthead-brand">Cover</h3>
        <nav class="nav nav-masthead">
          <a class="nav-link active" href="#">Home</a>
          <a class="nav-link" href="#">Features</a>
          <a class="nav-link" href="#">Contact</a>
        </nav>
      </div>
    </div>
    <div class="mastfoot">
      <div class="inner">
        <p></p>
      </div>
    </div>
  </div>
 </div>
</div>
</body>

CSS：

 video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;   
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}

我希望有这样的结果：

有可能吗？

Answer 1

video { 
    position: fixed;
    top: 50%;
    left: 50%;

min-width：70％;

    min-height: 100%;
    width: auto;
    height: auto;   
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}

//我建议你使用这个css，通过设置min-width：70％你的视频只占你视口的70％：）

HTML5视频元素宽度70％

1 个答案: