使用CSS向HTML5背景视频添加控件 [英] Adding controls to HTML5 background video with CSS
本文介绍了使用CSS向HTML5背景视频添加控件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我一直在努力寻找答案,我想向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屋!
查看全文