Question

我正在尝试为网页添加视频背景，并遇到2个问题/问题。

我希望视频停留在页面顶部的div中，并保持在完整的浏览器窗口中（现在发生了什么）
视频仅在向下滚动页面后显示。几乎就好像顶部有一个div。无法弄清楚。

这是HTML和CSS：

.section-content {
  width: 50%;
  display: inline-block;
}
#section1 .section-container {
  height: 800px;
  width: 100%;
  text-align: center;
  background-color: ;
  padding-top: 100px;
}
video { 
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url('') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
#section2 .section-container {
  height: 800px;
  width: 100%;
  text-align: center;
  background-color: ;
}
#section3 .section-container {
  height: 800px;
  width: 100%;
  text-align: center;
  background-color: ;
}

<video autoplay muted loop id="bgvid">
  <source src="http://callmenick.com/_development/video/full-screen-background-video/media/demo.mp4" type="video/mp4">
</video>

<nav>
  <div class="container-nav">
    <a href="#" class="navabout">?</a>
  </div>
</nav>

<section id="section1">
  <div class="section-container">
    <div class="section-content">
      <h1>Main headline is here</h1>
      <h2>Sub headline is here about stuff.</h2>
    </div>
  </div>
</section>

<section id="section2">
  <div class="section-container">
    <div class="section-content">
      <p>Assertively synergize enterprise-wide</p>
      <p>Globally exploit value-added mindshare for B2C synergy. Authoritatively orchestrate technically sound meta-services and revolutionary infrastructures. Assertively synergize enterprise-wide communities before adaptive internal or "organic" sources.</p>
    </div>
  </div>
</section>

Answer 1

回答1） 将您的视频position:fixed更改为position:absolute，使其保持在最顶层。

回答2） 由于外部链接和大尺寸，视频可能需要时间来加载。尝试下载视频并将其放在您的网络资源文件夹中以在本地加载它，并查看视频的大小是否可以缩小。（需要更多细节来解决因为无法重现样本：http://codepen.io/Nasir_T/full/rWjxeN/）

[编辑问题＃2] - 用户发现问题并自行修复

来自M Hamilton的评论：知道了！高度：100％;保证金：0;填充：0;在身体标签。删除这些，它工作正常。

Answer 2

如果示例中的视频代表您要使用的内容（即它只有几秒钟并且有音频），您不应该自动播放视频，绝对不是没有提供快速触及的键盘可访问控件，允许用户停止它！

原因如下：

有些人，特别是盲人，使用screen reader来访问网络内容（以及他们的计算机或智能手机）。大多数屏幕阅读器使用语音合成来告诉用户页面上的内容。 当音频（或包含音频的视频）开始自动播放时，会干扰屏幕阅读器的语音输出。因此，如果您使用自动播放的音频，请将其设置得很短（最多几秒钟））和/或确保它很容易暂停或停止（键盘可访问的控制应该很容易到达）。请参阅网络内容辅助功能指南2.0中的Understanding Success Criterion 1.4.2。
有些人因为移动内容而分心，然后难以与网络内容互动。请参阅Web内容辅助功能指南2.0中的Understanding Success Criterion 2.2.2：

（...）移动或自动更新的内容可能成为任何无法快速阅读固定文本的人以及跟踪移动对象时遇到问题的人的障碍。它还可能导致屏幕阅读器出现问题。移动内容也可能是一些人的严重分心。某些群体，特别是那些有注意力缺陷障碍的群体，发现闪烁的内容会分散注意力，使他们难以专注于网页的其他部分。（...）

另见AbilityNet上的Why Autoplay is an accessibility issue（2015年10月）。

HTML5视频背景 - 顶部奇怪的图层？

2 个答案: