HTML5 视频定位到顶部

Question

有谁知道如何将视频内容定位到顶部，例如带有背景图像的“位置：顶部”？
我有一个 1920x1080px 的视频，但 div 当前使用 1920x550px。我尝试搜索万维网，但没有成功。

      <video playsinline autoplay muted loop>
          <source src="vid/vid_3.mp4" type="video/mp4">
          Your browser does not support the video tag.
      </video>

亲切地，
路易斯

Answer 1

感谢您的回复。不幸的是它不起作用，但我设法通过设置高度来修复它：

<video playsinline autoplay muted loop style="height: 1080px;">

Answer 2

我的示例将视频图片位置移动到页面顶部。

视频图片位于顶部并不明显，因为导航栏会遮挡它的视图。因此，在 navbar （是

设置代码）中，要将其向下移动以进行测试，请将其添加到标记设置中：

style="top:40px"

设置示例：

<nav id="navbar" 
class="navbar navbar-expand-lg top-navbar sticky is-sticky" 
data-toggle="sticky-onscroll" 
style="top:40px"> 

然后找到 class="col-12 video-wrapper" 的 div 并添加到其 "style" ...

top: -60px

尝试如下设置：

<div class="col-12 video-wrapper" 
style="background-image:url('vid/still_vid_3.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 550px;
opacity: 0.4; 
top:-60px">

<video playsinline="" autoplay="" muted="" loop="" controls="">
<source src="vid/vid_3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</div>

Answer 3

我遇到了同样的问题，发现将视频 CSS 高度设置为“自动”对我有用。

以下是编辑 HTML 代码第一行以包含内联 CSS 的示例：

<video playsinline autoplay muted loop style="height: auto;">