HTML5视频定位到顶部答案

【问题标题】：HTML5 video positioning to the topHTML5视频定位到顶部
【发布时间】：2023-02-22 12:40:02
【问题描述】：

有谁知道如何将视频内容定位到顶部，例如带有背景图片的“位置：顶部”？
我有一个 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>

亲切地，
路易斯

【问题讨论】：

标签： html css video html5-video

【解决方案1】：

谢谢回复。不幸的是它没有用，但我设法通过设置高度来修复它：

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

【讨论】：

【解决方案2】：

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

视频图片位于顶部并不明显，因为导航栏会挡住它的视图。所以在导航栏（是<nav id="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>

【讨论】：

【解决方案3】：

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

【讨论】：