html - 如何使背景像素视频显示在我的标题部分并在其顶部显示文本

问题描述

我目前正在使用 HTML 和 CSS 开发一个项目，并希望显示来自 Pexel 的背景视频，该视频占据了屏幕上方的“你好”和“认识团队”部分的整个顶部（不包括导航栏）。我在下面链接了我的 Codepen，但这里是我认为我的错误会出现的特定区域。

HTML：

 <div class="all">

  <head id="home">
    <div id="welcome-section">
      <!-- The video -->
<!-- The video -->
<video autoplay muted loop id="myVideo">
  <source src="pexels-magda-ehlers-5306154.mp4&" type="video/mp4">
    </video>

<div class="content">
  <h1>Hello</h1>
</div>
    </div>

CSS：

      html, .all {
      margin:0;
      height:100%;
      box-sizing:border-box;
      background-image: url("https://m.media-amazon.com/images/I/41g8yeF0NWL._AC_.jpg");
       background-repeat: no-repeat;
     background-size:cover;
     background-attachment: fixed;
    }


#welcome-section{
   display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size:50px;
  color:white;
  height:100vh;
  
}

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.content {
  position: relative;
  height: 100vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

我已经使用了这些链接中的信息，但视频仍然不会显示。任何帮助，将不胜感激！

Codepen：https ://codepen.io/coder3o2-4/pen/ExXYeRY

我遵循并实施的链接：

https://css-tricks.com/full-page-background-video-styles/

https://www.w3schools.com/howto/howto_css_fullscreen_video.asp

标签： htmlcsscodepen

您的代码有效，即使我不完全了解您想要实现的目标。

codepen中的问题是您链接了一个不存在的视频文件，您将mp4视频保存在哪里？video 标签的 src 属性应该是本地/生产服务器上视频文件的路径，例如 /assets/video/myvideo.mp4。如果您不确定视频是否正确链接，只需使用 chrome 检查您的页面，右键单击视频 URL 并单击“在新选项卡中打开”键。如果您可以看到视频正常工作，则表示它已正确链接。

除此之外，您可能必须从第一部分删除背景并使用视频本身的 z-index 属性，以便将其正确定位在 z 轴上其余内容的“下方”。

在我附上的图片中查看，我链接了一个随机视频以查看它是否有效（你看到的草）。

html - 如何使背景像素视频显示在我的标题部分并在其顶部显示文本

问题描述

解决方案

推荐阅读