带引导程序覆盖内容的HTML5背景视频
问题描述:
我目前正在尝试在引导程序中创建一个div,其中有两列以及整个div的背景视频。问题是,我无法做到这一点,并保留专栏内容,并全部做出响应。带引导程序覆盖内容的HTML5背景视频
我附上了一个小提琴 - 红色是我需要出现的视频(为了兼容性目的使用海报框)。
任何想法的最佳方式来做到这一点?由于
https://jsfiddle.net/by07or2p/#&togetherjs=DmdvnAF3Td
视频部分是下面,我不得不写的代码能够发布:相对
<video autoplay>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
答
更新小提琴:
添加ID到您的视频标签id='video-background'
<video autoplay id='video-background'>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
更改CSS
#video-background {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
.hero {
background: transparent;
}
更新小提琴:
检查更新小提琴的答案;) – Tushar