我对 HTML 中的 DIV 非常陌生(由于我 1996 年的编码知识，我习惯使用表格......)并且我遇到了一些可能不是很难但我找不到教程或帮助的问题对于任何地方的这个特定问题。如果之前已经处理过这个问题，请告诉我答案，很抱歉重复!
无论如何...我只是想制作一个DIV 网格，每个DIV 都有自己独立的视频背景。我在 HTML 示例中布置了网格(它的格式可能非常糟糕——同样，在 DIV 中是全新的)。我希望每个“pageWhatever”都有自己的视频背景，但如果没有一切都吓坏了并且每个“pageWhatever”的视频与下一个重叠或间隔开真的很奇怪，我就无法让它工作。我只想保留这个网格，让每个部分都有自己的视频背景。这不可能吗？!
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page Title</title>
<meta name="description" content="Write some words to describe your html page">
</head>
<style>
*{
padding : 0;
margin : 0;
border : 0;
}
body{
background-image : url(' bi-background-cubes.png ');
background-attachment : fixed;
background-size : 100% auto;
}
.blended_grid{
display : block;
width : 100%;
overflow : auto;
margin : 0px auto 0 auto;
}
.pageLeftMenu{
background-color : darkgreen;
float : left;
clear : none;
height : 600px;
width : 15%;
}
.pageContent{
background-color : lightgreen;
float : left;
clear : none;
height : 600px;
width : 70%;
}
.pageRightMenu{
background-color : darkgreen;
float : left;
clear : none;
height : 600px;
width : 15%;
}
.pageFooter{
background-color : green;
float : left;
clear : none;
height : 200px;
width : 100%;
}
</style>
<style>
.pageHeader {
height: 100px;
border: 0px solid #000;
border-right:none;
border-left: none;
position: relative;
padding: 0px;
}
#video-container {
position: absolute;
}
#video-container {
top:0%;
left:0%;
height:100px;
width:100%;
overflow: hidden;
}
video {
position:absolute;
z-index:0;
}
video.fillWidth {
width: 100%;
}
</style>
<body>
<div class="blended_grid">
<div class="pageHeader">
</div>
<div class="pageLeftMenu">
</div>
<div class="pageContent">
</div>
<div class="pageRightMenu">
</div>
<div class="pageFooter">
</div>
</div>
</body>
</html>
最佳答案
要将循环视频显示为背景，您需要设置
<video preload autoplay loop muted>
- >
preload - 我们在这里并不真正需要它，因为如果存在自动播放，preload 属性将被忽略。
preload 属性指定作者认为是否以及如何在页面加载时加载视频。 preload 属性允许作者向浏览器提供他/她认为会带来最佳用户体验的提示。如上所述，在某些情况下可能会忽略此属性。 - > 自动播放 - 自动播放视频。视频会尽快自动开始播放而不会停止。
- > loop - 它指定视频每次结束时都会重新开始。
- > 静音 - 它指定视频的音频输出应该静音。假设您想避免为背景视频打开视频的音乐/声音
最后，整体看起来是这样的: online example here
<table>
<tr>
<td>
<div class="videoBg">
<video autoplay loop muted>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/webm; codecs="vp8, vorbis"' />
Video not supported.
</video>
</div>
</td>
<td>... same here ...</td>
</tr>
<tr>
<td>... same here ...</td>
<td>... same here ...</td>
</tr>
</table>
你的 CSS 是这样的:
NOTE: I've created the table with padding just to make it more clean to see, you can either remove it later or style it for your needs
.videoGrid {
border-spacing: 2px;
background-color: lightGrey;
width: 100%;
border-collapse: collapse;
text-align: center;
}
td {
background-color:orange;
border: 1px solid gray; /* You can later remove this */
padding: 6px; /* And remove this */
width: 47%; /* In order to make this 50% so it fill all the blank spaces and screen */
display: inline-block;
}
.videoBg {
overflow: hidden;
}
.videoBg video{
min-width: 100%;
min-height: 100%;
}
使用 Youtube 视频
如果您想改用 youtube 视频，只需更改 .videoBg video 的 CSS为此: online example here
NOTE: Read more about embedding youtube videos with no sound/music here or just use a youtube video that has no sound already. To avoid the user of clicking on a video to pause/play, you can overlay a div with position absolute to overlay the video.
.videoBg iframe{
width:100%;
height:100%;
}
嵌入代码:
<iframe width="560" height="315" src="https://www.youtube.com/embed/IJNR2EpS0jw?autoplay=1&controls=0&showinfo=0&autohide=1" frameborder="0" allowfullscreen></iframe>
关于html - 网格格式的视频 div 背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29523923/