我真的很想弄清楚如何做到这一点。我的网站是使用 Ruby on Rails 制作的，但我假设您只需要使用 HTML 和 CSS 就可以做到这一点。
到目前为止，这是我尝试过的:
View 主体/layouts/home_layout.html.erb:
`
<body>
<div class="navbar navbar-inverse navbar-fixed-top" id="navbar">
<div class="container" id="body">
<a id="nav" class="navbar-brand" href="/projects">
<img src="http://i1051.photobucket.com/albums/s423/Kira-Banks/check-2.png" id="logo">
Checklance
</a>
</div>
</div>
<div id="homeContainer">
<div id="homeVideo">
<video>
<source src="trafficLoop.mp4" type="video/mp4">
</video>
<div>
</div>
</div>
<%= yield %>
</div>
<footer id="footer">Copyright 2014 Kira Banks</footer>
</body>
`
assets/stylesheets/pages.css.scss:
`
#homeVideo {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#homeVideo video {
position: absolute;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 0;
}
#homeVideo div {
position: relative;
z-index: 1;
}
`
我的视频文件位于assets/images/trafficLoop.mp4
最佳答案
最好用的是 YTPlayer
将您的视频上传到 Youtube，并使用播放器，这是全屏背景播放器在网络上最常见和最好的解决方案。它还兼容所有版本的浏览器
https://github.com/pupunzi/jquery.mb.YTPlayer/wiki
这样使用
$(function(){
$(".player").YTPlayer();
});
关于html - 使用 HTML 和 CSS 将 .MP4 视频作为背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27372060/