Question

我对HTML中的DIV很新（由于我1996年的编码知识，我习惯使用表格）而且我遇到的问题可能不是很难但我找不到教程或帮助对于这个特定的问题。如果以前已经处理过这个问题，请指导我答复，对不起，我很抱歉！

无论如何......我正在尝试制作一个DIV网格，每个都有自己独立的视频背景。我在HTML示例中列出了网格（可能格式非常糟糕 - 再次，DIV全新）。我想要每个＆＃34; pageWhatever＆＃34;拥有自己的视频背景，但我不能让它工作，没有一切都吓坏了，每个＆＃34;页面的视频重叠到下一个或者让事情变得非常奇怪。我只想保留这个网格并让每个部分都有自己的视频背景。这不可能吗？！

<!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>

Answer 1

要将循环视频显示为背景，您需要设置
<video preload autoplay loop muted>

预加载 - 我们不需要这样做，因为如果存在自动播放，则会忽略预加载属性。

preload属性指定作者是否以及如何在页面加载时认为应该加载视频。 preload属性允许作者向浏览器提供关于他/她认为将导致最佳用户体验的提示。如上所述，在某些情况下可以忽略该属性。
自动播放 - 自动播放视频。视频将在不停止的情况下立即自动开始播放。
循环 - 它指定视频每次完成时都会重新开始。
静音 - 指定视频的音频输出应静音。假设您要避免为背景视频打开视频的音乐/声音

最后，以下是整个事情的样子： 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是这样的：

注意：我已经使用填充创建了表格，只是为了让它看起来更干净，您可以稍后删除它或根据需要设置样式

.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

注意：详细了解如何嵌入没有声音/音乐的YouTube视频 here ，或者只使用没有声音的YouTube视频。为避免用户点击视频暂停/播放，您可以使用绝对位置覆盖div以覆盖视频。

.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>

视频div背景以网格式

1 个答案:

使用Youtube视频