使用CSS向HTML5背景视频添加控件 [英] Adding controls to HTML5 background video with CSS

问题描述

我一直在努力寻找答案，我想向HTML5背景视频添加控件，以便用户至少出于可访问性原因而选择暂停视频。内置的HTML5控件属性可以正常工作，但是一旦我添加CSS将视频置于背景中，控件就会消失。如何保留控件并在后台显示视频？

I've stuggled to find an answer to this problem, I would like to add controls to HTML5 background video, so that users can at least choose to pause the video for accessibility reasons. The built-in HTML5 "Controls" attribute work just fine but as soon as I add my CSS to put the video in the background, the controls disappear. How do I keep the controls and have the video in the background?

这是我简单的HTML5代码：

Here is my simple HTML5 code:

<div class="fullscreen-bg">
    <video controls loop muted autoplay poster="Rustypic.jpg" class="fullscreen-bg-video">
        <source src="Rustybeg.webm" srclang="en" type="video/webm">
    </video>
</div>

这是我的CSS，将视频置于后台：

Here is my CSS that puts the video in the background:

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

推荐答案

类似这个？

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}
.fullscreen-bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -5;
}

<div class="fullscreen-bg">
  <video controls loop muted autoplay poster="Rustypic.jpg" class="fullscreen-bg-video">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
</div>
<div class="content">NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.</div>

这篇关于使用CSS向HTML5背景视频添加控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！