Question

我正在尝试使视频背景响应。我不想嵌入一个youtube视频，它显示播放和停止底部。我只是想让视频自然地播放，就像它是一个背景。问题是现在似乎没有完全响应。我在css和html中都将宽度设置为100％。

以下是我在互联网上发现的随机网站的一个示例，该网站有响应视频，因为我正在尝试创建http://www.mirumagency.com/hong-kong

#header-video {
  background: none;
  width: 100%;
}
#header-video .page-header {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: 0;
  z-index: 3;
}
#header-video .page-header h1 {
  margin: 0;
  font-size: 42px;
}
#header-video .page-header small {
  margin: 0 0 20px;
  font-size: 24px;
}
#header-video .page-header small:nth-of-type(2) {
  margin-top: 15px;
}
#header-video:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  display: block;
  z-index: 1;
}

@media (max-width: 367px) {
  #header-video .full-height black-wrapper{
  max-width: 367px;
  }}

<body>
	
	
	<!-- video header plugin & documentation here: http://vodkabears.github.io/vide/ -->


	<div id="header-video"
		class="full-height black-wrapper" 
		style="width: 100%; height: 500px;" 
		data-vide-bg="mp4: style/video/footage, webm: style/video/footage, ogv: style/video/footage, poster: img/front.png" 
		data-vide-options="position: 0% 50%">
	<!-- replace the above options with your own -->
		
		<div class="bar left-bar"></div>
		<div class="bar right-bar"></div>
		<div class="bar bottom-bar"></div>
	
		<!--<a id="down-link" href="#"><i class="icon-mouse"></i></a> -->
	
	</div>
	<!-- end the video header -->

</body>
</html>

韭菜：http://www.mirumagency.com/hong-kong

Answer 1

试试FitVids.JS。它可能对你有帮助。

如何制作背景视频？

1 个答案: